Rumah > Artikel > hujung hadapan web > 利用animation属性实现循环间的延时执行实例教程

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

零下一度asal: 2017-05-18 14:37:383406semak imbas

先来介绍一下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）

Atas ialah kandungan terperinci 利用animation属性实现循环间的延时执行实例教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：详解css3中两种暂停方式（transition、animation）Artikel seterusnya：必须掌握的CSS3动画（Animation）的8大属性

Artikel berkaitan

Lihat lagi