Javascript css3动画延迟仅适用于Firefox？；

代码来自 但是动画延迟在chrome和IE11上不起作用，为什么？他们会做动画，但没有延迟，css已经写入其中，浏览器前缀的区别是正确的，但只有在Firefox动画延迟中有效(

ul[data liffect=“pageTop”]li{
不透明度：0；
位置：相对位置；
-webkit动画：pageTop 600毫秒轻松播放；
-webkit动画播放状态：暂停；
-webkit转换来源：50%0%；
-moz动画：pageTop 600毫秒轻松播放；
-moz动画播放状态：暂停；
-moz变换原点：50%0%；
-o型动画：pageTop 600毫秒，轻松播放；
-o-动画播放状态：暂停；
-o-变换原点：50%0%；
动画：pageTop 600毫秒轻松播放；
动画播放状态：暂停；
变换原点：50%0%；
}
ul[data liffect=“pageTop”]播放li{
-webkit动画播放状态：正在运行；
-moz动画播放状态：正在运行；
-o-动画播放状态：正在运行；
动画播放状态：运行；
}
@-webkit关键帧页面顶部{
0%{不透明度：0；-webkit变换：透视（400px）旋转（90度）；}
100%{不透明度：1；-webkit变换：透视（400px）旋转（0deg）；}
}
@-moz关键帧页面顶部{
0%{opacity:0；-moz变换：透视（400px）旋转（90deg）；}
100%{不透明度：1；-moz变换：透视（400px）旋转（0deg）；}
}
@-o关键帧页面顶部{
0%{不透明度：0；-o变换：透视（400px）旋转（90度）；}
100%{不透明度：1；-o变换：透视（400px）旋转（0deg）；}
}
@关键帧页面顶部{
0%{不透明度：0；变换：透视（400px）旋转（90度）；}
100%{不透明度：1；变换：透视（400px）旋转（0deg）；}
}
$（文档）.ready（函数（）{
$（“ul[数据有效性]li”）。每个（功能（i）{
$（this.attr（“style”，”-webkit动画延迟：“+i*300+”ms；”
+-moz动画延迟：“+i*300+”毫秒
+-o-动画-延迟：“+i*300+”毫秒
+“动画延迟：“+i*300+”毫秒；”；
如果（i=$（“ul[data liffect]li”）.size（）-1）{
$（“ul[data liffect]”）addClass（“play”）
}
});
});

因为动画已经应用。
可以将属性合并为一个属性。 或者使用其他类名启用动画，并在设置延迟后指定

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%;
}

---

我使用的是最新版本的Chrome for Mac，动画延迟似乎效果很好。您在这一行中缺少了一个分号：

$（“ul[data liffect]”）。addClass（“play”）

。换行符很时髦。Chrome是否需要更新？

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%;
}