轨迹动画可以用svg来做,更简单
<svg width="500" height="350" viewBox="0 0 500 350">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M0,20 L80,20 L100,60 L330,20 L370,20"/>
<circle id="circle" r="10" cx="0" cy="0" fill="tomato" />
<animateMotion
xlink:href="#circle"
dur="5s"
begin="0s"
fill="freeze"
repeatCount="indefinite">
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>
演示地址
楼上的solar 的方法是一种方法, 在每个百分比下 依次添加如下代码即可
transform: rotate(0deg);
transform: rotate(720deg);
transform: rotate(1440deg);
transform: rotate(2160deg);
transform: rotate(2880deg);
transition 通过add remove, Class 进行操作
.myMove{
height: 50px;
width: 50px;
background: red;
position: absolute;
top: 0;
left: 0;
transition: all 3s;
}
.move0{
left: 0px;
top: 0;
transform: rotate(0deg);
}
.move1{
left: 280px;
top: 0;
transform: rotate(720deg);
}
.move2{
left: 310px;
top: 60px;
transform: rotate(1440deg);
}
.move3{
left: 330px;
top: 90px;
transform: rotate(2160deg);
}
.move4{
left: 370px;
top: 140px;
transform: rotate(2880deg);
}
var i = 1;
setInterval(function(){
$(".myMove").attr("class", "").addClass("myMove").addClass("move" + i);
i++;if(i > 4){
i = 0;
}
},3000);
CSS3只能定义简单的有规律的直线运动,路径运动推荐svg或者canvas实现
楼上的keyframes,这种多个类似动画的东西直接拿keyframes做就行
CSS3 animation
@keyframes myMove {
0% {
left: 0;
top: 0;
}
25% {
left: 280px;
top: 0;
}
50% {
left: 310px;
top: 60px;
}
75% {
left: 330px;
top: 90px;
}
100% {
left: 370px;
top: 140px;
}
}
.myMove {
animation: myMove 12s ease-in-out;
}