Safari中的動畫延遲

Question

我想讓頁腳動畫在一個接一個地出現。它適用於除Safari之外的所有內容，它們都是一次性出現的。任何想法添加什麼？

該網站是：http://inventivewebdesign.com/ndr/

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.XX因此Safari版本相同。似乎該版本的Safari阻止了動畫執行，直到用戶將手指從頁面上移開。

我剛剛遇到了一個問題，即我的動畫未在Safari 7.X.X中被觸發，直到用戶從滾動中提起手指爲止。 iOS/Safari 8.X.X沒有這樣的問題，並按預期發射動畫。