为一条线设置动画并使其变成 CSS3

Question

我有一行。我正在从左到右移动它。这很好。但现在我想把它变成一个掉头的方式，或者像蛇一样。我该怎么做？

.top {
position: absolute;
width: 100px;
height: 5px;
left: 0;
background-color: red;
animation: move 5s;
}
@-webkit-keyframes move {
from {}
to {
left: 50px;
}
}

<div class="top"></div>

Answer 1

不确定这是否是你所追求的，但希望它有所帮助。

.top {
position: absolute;
width: 100px;
height: 5px;
left: 0;
top: 0;
background-color: red;
animation: move 5s 1s forwards;
}
@-webkit-keyframes move {
0% {
left: 0px;
top: 0px;
}
25% {
left: 50px;
}
50% {
top: 20px;
transform: rotate(180deg);
}
100% {
left: 0;
top: 20px;
transform: rotate(180deg);
}
}

<div class="top"></div>