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中工作吗？

回答

相关问题