• 技术文章 >web前端 >css教程

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

    零下一度零下一度2017-05-18 14:37:38原创1587
    先来介绍一下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属性实现循环间的延时执行实例教程的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:详解css3中两种暂停方式(transition、animation) 下一篇:必须掌握的CSS3动画(Animation)的8大属性
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 原来利用纯CSS也能实现文字轮播与图片轮播!• css3怎样实现不是直角的菱形效果• css样式中有文字描边吗• 12个值得收藏的 CSS 技巧!!• css中圆角属性值能用百分比吗
    1/1

    PHP中文网