Question

我试图让三件物品一个接一个地进来。到目前为止，他们都使用相同的动画，延迟工作，但我想将它们分开，所以每个相隔1.5秒。我想避免重复CSS中的所有动画代码。这是我的代码：

HTML

<!-- FOOTER TAGLINE -->
        <div id="ftr-tagline">
            <div id="ftr1-animation" class="slideLeft">
                <div class="one-third">
                    <div class="one-call">
                        One Call...
                    </div><!-- .one-call -->
                </div><!-- .one-third -->
            </div><!-- #ftr1-animation -->
            <div id="ftr2-animation" class="slideLeft">
                <div class="one-third">
                    <div class="one-contact">
                        One Contact...
                    </div><!-- .one-contact -->
                </div><!-- .one-third -->
            </div><!-- #ftr2-animation -->
            <div id="ftr3-animation" class="slideLeft">
                <div class="one-third last">
                    <div class="one-culture">
                        One Culture...
                    </div> <!-- .one-contact -->
                </div><!-- .one-third -->
            </div> <!-- #ftr3-animation -->
        </div> <!-- #ftr-tagline -->
        <!-- END FOOTER TAGLINE -->

CSS：

/* ANIMATIONS */

#title-animation, #ftr1-animation, #ftr2-animation, #ftr3-animation{
    /*background-color: #fe5652;*/
    visibility: hidden;
}

/*
==============================================
slideLeft
==============================================
*/


.slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;  

    animation-duration: 1s; 
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    -webkit-animation-delay: 1.5s; /* Safari and Chrome */
    animation-delay: 1.5s;

    visibility: visible !important; 
}

@keyframes slideLeft {
    0% {transform: translateX(150%);}   
    100% {transform: translateX(0%);}
}

@-webkit-keyframes slideLeft {
    0% {-webkit-transform: translateX(150%);}       
    100% {-webkit-transform: translateX(0%);}
}

Answer 1

不是将延迟应用于所有三个div（.slideLeft），而是将延迟分别应用于每个div：

#ftr2-animation {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

#ftr3-animation {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

以下是演示：http://jsfiddle.net/8jTg5/

各个div的CSS动画延迟

1 个答案: