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

阿飞i
  • 628

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

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

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

回复
阅读 6.4k
3 个回答
JasonKidd
  • 3.3k

最多只能做到这样了

最多只能做到这样了

zonxin
  • 12.1k

为什么要用贝塞尔曲线?
如果你想知道,我可以告诉你,那个是三阶贝塞尔曲线,只不过只能移动其中的两个控制点,可以参考 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>

使用css3动画帧来控制

宣传栏