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;

}