单个 div 的 CSS 动画延迟答案

【问题标题】：CSS Animation Delay for individual divs单个 div 的 CSS 动画延迟
【发布时间】：2014-06-28 05:38:10
【问题描述】：

我试图让三个项目一个接一个地进来。到目前为止，它们都使用相同的动画并且延迟有效，但我想将它们分开，以便每个相隔 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%);}
}

【问题讨论】：

标签： css css-animations

【解决方案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/

【讨论】：

效果很好！现在，有什么想法让它们在延迟时间结束之前不可见吗？我将 CSS 更改为：#title-animation、#ftr1-animation、#ftr2-animation、#ftr3-animation{ visibility: hidden; } #ftr1-animation{ -webkit-animation-delay: 2s; /* Safari 和 Chrome / animation-delay: 2s; } #ftr2-animation{ -webkit-animation-delay: 3s; / Safari 和 Chrome / animation-delay: 3s; } #ftr3-animation{ -webkit-animation-delay: 4s; / Safari 和 Chrome */ animation-delay: 4s; }
如果你看一下我的小提琴演示，你会发现它们在动画开始之前是隐藏的。 visibility:visible 在@keyframes 内设置。