欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

利用animation属性实现循环间的延时执行实例教程

程序员文章站 2022-04-21 12:28:18
...
先来介绍一下animation定义和用法

animation 属性是一个简写属性,用于设置六个动画属性:

    animation-name
    animation-duration
    animation-timing-function
    animation-delay
    animation-iteration-count
    animation-direction

默认值: none 0 ease 0 1 normal

注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

语法

 animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称。。

animation-duration 规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。(值:n次,infinite无限循环)

animation-direction 规定是否应该轮流反向播放动画。

总结:

根据上述属性,只需要根据具体情况设置animation-delay和animation-iteration-count即可。

例如:

p
{
animation:mymove 5s 5s infinite;
-webkit-animation:mymove 5s 5s infinite; /* Safari 和 Chrome */
}

方案例子:

<!doctype html><html lang="en"><head>
 <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .item1{
         list-style: none;
         -webkit-animation: revolving 4s 0s infinite;
         animation: revolving 4s 0s infinite;
        }
        @-webkit-keyframes revolving{
         0,75%{
        -webkit-transform: perspective(700px) rotateX(90deg);
         }
         87.5%{
        -webkit-transform: perspective(700px) rotateX(0deg);
         }
         100%{
        -webkit-transform: perspective(700px) rotateX(-90deg);
         }
        }
    </style>
</head>
    <body>
        <ul>
            <li class="item1">梅西与美洲杯失之交臂</li>
        </ul>
    </body>
</html>

把总动画设为4秒,然后前75%也就是3秒都没变化(0-75%),之后的25%也就是1秒做动画就可以了。

【相关推荐】

1. 详细介绍CSS3中animation-direction属性

2. 必须掌握的CSS3动画(Animation)的8大属性

3. 分享一个监听css3动画(animation)结束事件实例

4. 详解css3中两种暂停方式(transition、animation)

以上就是利用animation属性实现循环间的延时执行实例教程的详细内容,更多请关注其它相关文章!