Question

我试图让页脚动画一个接一个地进入。除了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;    
}

Answer 1

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

我遇到了一个问题，我的动画在Safari 7.X.X中没有被触发，直到用户从滚动手指上移开。 iOS / Safari 8.X.X没有这样的问题，并按预期启动了动画。

Safari中的动画延迟

1 个答案: