css3動畫延遲只能在Firefox中工作嗎？

http://ademilter.com/lab/liffect/代碼但是動畫延遲對chrome和IE11沒有任何作用，爲什麼？他們會動畫，但沒有延遲，css已經寫入它，瀏覽器前綴區別是正確的，但只在Firefox動畫延遲有效。:(css3動畫延遲只能在Firefox中工作嗎？

<ul data-liffect="pageTop"> 
    <li><img src="images/block_03.jpg" alt="Lion"></li> 
    <li><img src="images/block_03.jpg" alt="Lion"></li> 
    <li><img src="images/block_03.jpg" alt="Lion"></li> 
</ul> 


<style type="text/css"> 
ul[data-liffect="pageTop"] li { 
    opacity: 0; 
    position: relative; 
    -webkit-animation: pageTop 600ms ease both; 
    -webkit-animation-play-state: paused; 
    -webkit-transform-origin: 50% 0%; 
    -moz-animation: pageTop 600ms ease both; 
    -moz-animation-play-state: paused; 
    -moz-transform-origin: 50% 0%; 
    -o-animation: pageTop 600ms ease both; 
    -o-animation-play-state: paused; 
    -o-transform-origin: 50% 0%; 
    animation: pageTop 600ms ease both; 
    animation-play-state: paused; 
    transform-origin: 50% 0%; 
} 

ul[data-liffect="pageTop"].play li { 
    -webkit-animation-play-state: running; 
    -moz-animation-play-state: running; 
    -o-animation-play-state: running; 
    animation-play-state: running; 
} 

@-webkit-keyframes pageTop { 
    0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); } 
    100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); } 
} 

@-moz-keyframes pageTop { 
    0% { opacity: 0; -moz-transform: perspective(400px) rotateX(90deg); } 
    100% { opacity: 1; -moz-transform: perspective(400px) rotateX(0deg); } 
} 

@-o-keyframes pageTop { 
    0% { opacity: 0; -o-transform: perspective(400px) rotateX(90deg); } 
    100% { opacity: 1; -o-transform: perspective(400px) rotateX(0deg); } 
} 

@keyframes pageTop { 
    0% { opacity: 0; transform: perspective(400px) rotateX(90deg); } 
    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); } 
} 
</style> 



<script type="text/javascript"> 
    $(document).ready(function() { 
     $("ul[data-liffect] li").each(function (i) { 
      $(this).attr("style", "-webkit-animation-delay:" + i * 300 + "ms;" 
       + "-moz-animation-delay:" + i * 300 + "ms;" 
      + "-o-animation-delay:" + i * 300 + "ms;" 
      + "animation-delay:" + i * 300 + "ms;"); 
     if (i == $("ul[data-liffect] li").size() -1) { 
      $("ul[data-liffect]").addClass("play") 
      } 
     }); 
    }); 
</script>

來源

2014-04-23 lleeoo

我在Mac和最新版本的Chrome的動畫延遲似乎工作的偉大。你在這行中缺少一個分號：'$（「ul [data-liffect]」）。addClass（「play」）'。換行符很時髦。也許Chrome需要更新？ – MyCompassSpins

因爲動畫已經應用。
您可以將屬性合併成一個。或者使用其他類名，使動畫和分配設置延時後

ul[data-liffect="pageTop"].play li { 
    opacity: 0; 
    position: relative; 
    -webkit-animation: pageTop 600ms ease both; 
    -webkit-animation-play-state: running; 
    -webkit-transform-origin: 50% 0%; 
    -moz-animation: pageTop 600ms ease both; 
    -moz-animation-play-state: running; 
    -moz-transform-origin: 50% 0%; 
    -o-animation: pageTop 600ms ease both; 
    -o-animation-play-state: running; 
    -o-transform-origin: 50% 0%; 
    animation: pageTop 600ms ease both; 
    animation-play-state: running; 
    transform-origin: 50% 0%; 
}

http://jsfiddle.net/emn178/76mSR/

來源

2014-04-23 03:32:16 emn178

是的，你是對的！謝謝！ – lleeoo

css3動畫延遲只能在Firefox中工作嗎？

回答

相關問題