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