Safari 中的动画延迟答案

【问题标题】：Animation delay in SafariSafari 中的动画延迟
【发布时间】：2015-04-25 04:02:02
【问题描述】：

我试图让页脚动画一个接一个地出现。它在除 Safari 之外的所有设备中都可以正常工作，因为它们会同时出现。关于添加什么的任何想法？

HTML

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

CSS

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


.page-id-4 #ftr1-animation, .page-id-4 #ftr2-animation, .page-id-4 #ftr3-animation{
    visibility: hidden;
}
.page-id-4 .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;     

     /* Keep animation visible after animation finishes */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards; 
}

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

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


.page-id-4 #ftr1-animation{
    -webkit-animation-delay: 2s; /* Safari and Chrome */
    animation-delay: 2s;
}
.page-id-4 #ftr2-animation{
    -webkit-animation-delay: 3s; /* Safari and Chrome */
    animation-delay: 3s;
}
.page-id-4 #ftr3-animation{
    -webkit-animation-delay: 4s; /* Safari and Chrome */
    animation-delay: 4s;    
}

【问题讨论】：

有人对此有可能的解决方案吗？

标签： safari css-animations

【解决方案1】：

这个问题很老，但我假设您运行的是 iOS 7.X.X，因此是相同版本的 Safari。似乎该版本的 Safari 会阻止动画执行，直到用户将手指从页面上移开。

我刚刚遇到了一个问题，即直到用户从滚动中抬起手指后，我的动画才在 Safari 7.X.X 中触发。 iOS/Safari 8.X.X 没有此类问题，并按预期触发了动画。

【讨论】：