javascript - css3 定义轨迹动画

Question

让小球沿着这个黄色的条走动，如何实现啊。
我居然用了一个笨办法

  $('.Yuan1').animate({left:'280px',top:'0'},3000);
  $('.Yuan1').animate({left:'310px',top:'60px'},3000);
  $('.Yuan1').animate({left:'330px',top:'90px'},3000);
  $('.Yuan1').animate({left:'370px',top:'140px'},3000);

Answer 1

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;
}

Answer 2

楼上的keyframes，这种多个类似动画的东西直接拿keyframes做就行

Answer 3

CSS3只能定义简单的有规律的直线运动，路径运动推荐svg或者canvas实现

Answer 4

1. 楼上的solar 的方法是一种方法, 在每个百分比下 依次添加如下代码即可

   
   
   transform: rotate(0deg);
   
   transform: rotate(720deg);
   
   transform: rotate(1440deg);
   
   transform: rotate(2160deg);
   
   transform: rotate(2880deg);
   
   

2. 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);

Answer 5

轨迹动画可以用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>  

演示地址