css3动画使用技巧之——transform-delay为负值时的应用。

<html>
    <head>
        <title>css3动画delay为负值时的效果</title>
        <meta charset="UTF-8"/>
        <style type="text/css">
            .he{
                width: 400px;
                height: 200px;
                background: #eee;
                margin: 0 auto;
                text-align: center;
                line-height: 200px;
            }
            .he div{
                width: 4px;
                height: 30px;
                background-color: green;
                display: inline-block;
                animation-name: myniy;
                animation-duration: 1.2s;
                animation-iteration-count: infinite;
                -webkit-animation-name: myniy;
                -webkit-animation-duration: 1.2s;
                -webkit-animation-iteration-count: infinite;
                -moz-animation-duration: 1.2s;
                -moz-animation-name: myniy;
                -moz-animation-iteration-count: infinite;
                
            }
            .m1{
                animation-delay: -1.1s;
                -webkit-animation-delay: -1.1s;
                -moz-animation-delay: -1.1s;
            }
            .m2{
                animation-delay: -1.0s;
                -webkit-animation-delay: -1.0s;
                -moz-animation-delay: -1.0s;
            }
            .m3{
                animation-delay: -0.9s;
                -webkit-animation-delay: -0.9s;
                -moz-animation-delay: -0.9s;
            }
            .m4{
                animation-delay: -0.8s;
                -webkit-animation-delay: -0.8s;
                -moz-animation-delay: -0.8s;
            }
            .m5{
                animation-delay: -0.7s;
                -webkit-animation-delay: -0.7s;
                -moz-animation-delay: -0.7s;
            }
            .m6{
                animation-delay: -0.6s;
                -webkit-animation-delay: -0.6s;
                -moz-animation-delay: -0.6s;
            }
            
            @keyframes myniy{
                0%,30%,70%,100%{
                    transform: scale(1,0.5);
                }
                50%{
                    transform: scale(1);
                }
            }
            @-webkit-keyframes myniy{
                0%,30%,70%,100%{
                    transform: scale(1,0.5);
                }
                50%{
                    transform: scale(1);
                }
            }
            @-moz-keyframes myniy{
                0%,30%,70%,100%{
                    transform: scale(1,0.5);
                }
                50%{
                    transform: scale(1);
                }
            }
        </style>
    </head>
    <body>
        <div class="he">
            <div class="m1"></div>
            <div class="m2"></div>
            <div class="m3"></div>
            <div class="m4"></div>
            <div class="m5"></div>
            <div class="m6"></div>
        </div>
    </body>
</html>

运行效果图css3动画使用技巧之——transform-delay为负值时的应用。_第1张图片

animation-delay为负值时表示,动画跳过多少秒进入动画周期。

上面要注意的地方,关键帧对称

 0%,30%,70%,100%{
                    transform: scale(1,0.5); }
 50%{ transform: scale(1); }
延迟为-(1.2-0.1)开始

你可能感兴趣的:(css3动画使用技巧之——transform-delay为负值时的应用。)