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

이 질문은 오래,하지만 난 당신이 아이폰 OS 7.XX를 실행하고 있으리라 믿고있어 따라서 동일한 버전의 사파리. 사용자가 페이지에서 손을 뗄 때까지 Safari의 해당 버전이 애니메이션 실행을 차단 한 것 같습니다.

사용자가 스크롤을 해제 한 후에야 내 애니메이션이 Safari 7.X.X에서 실행되지 않는 문제가 발생했습니다. iOS/Safari 8.X.X에는 이러한 문제가 없었으며 예상대로 애니메이션이 실행되지 않았습니다.