html5 - 关于css动画. 走3秒。停3秒。再走三秒。
PHP中文网
PHP中文网 2017-04-17 11:51:49
0
4
657

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

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

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

PHP中文网
PHP中文网

认证0级讲师

reply all(4)
Peter_Zhu

The most we can do is this

PHPzhong

Why use Bezier curve?
If you want to know, I can tell you that it is a third-order Bezier curve, but only two control points can be moved. You can refer to http://www.cnblogs.com/jay-dong/ archive/2012/09/26/2704188.html
CSS3 standard writing method, disdain compatibility code.

<!DOCTYPE html>
<html>
<head>
    <style> 
        p {
          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>
<p></p>
</body>
</html>
刘奇

Use css3 animation frames to control

伊谢尔伦

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!