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


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

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

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

css html5 css3动画

DZC死人 10 years, 1 month ago

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

失忆的梅林 answered 10 years, 1 month ago

使用css3动画帧来控制

恶魔的左次翅 answered 10 years, 1 month ago

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

★开心熊猫★ answered 10 years, 1 month ago

最多只能做到这样了

最多只能做到这样了

usher answered 10 years, 1 month ago

Your Answer