关于css动画. 走3秒。停3秒。再走三秒。

http://cubic-bezier.com.. 这个不太会玩.

一个动画完成共需9秒. 先让它走三秒.然后停三秒（几乎不动）.再走3秒.

这个贝塞尔曲线应该是怎样的？

最多只能做到这样了

js可以这样，onload=function(){
$('#id').delay(3000).removeClass('yourclass').delay(3000).addClass('yourclass').delay(3000);
}，

Css3
@keyframes name{
0%{...}100%{...}
}//加transition过渡
.class{animation:name time ease delay ....}

使用css3动画帧来控制

为什么要用贝塞尔曲线？
如果你想知道，我可以告诉你，那个是三阶贝塞尔曲线，只不过只能移动其中的两个控制点，可以参考 http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html
CSS3标准写法，就不屑兼容性代码了。

<!DOCTYPE html>
<html>
<head>
    <style> 
        div {
          width:100px;
          height:100px;
          background:red;
          position:relative;
          animation:mymove 9s infinite;
        }
        @keyframes mymove
        {
          0%   {top:0px;}
          33.3%  {top:100px;}
          66.7%  {top:100px}
          100% {top:300px;}
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

【热门文章】