滑入下一张柔性滑块幻灯片后，css 动画不起作用

After sliding in next flexslider slide, css animation is not working

本文关键字：幻灯片 不起作用 动画 css 一张      更新时间：2023-09-26

在每个flexslider列表中，我都有一个名为class="txt"的div，

所以我需要在每个flexslider的列表示例中对这个txt类进行动画处理：

<div class='flexslider'>
<ul>
<li><div class="txt">lorem ipsum</div></li>
<li><div class="txt">lorem ipsum</div></li>
<li><div class="txt">lorem ipsum</div></li>
</ul>
</div>

但是只有flexslider列表中的第一个class="txt"通过下面的css进行动画处理，每当我单击下一步时列表中的其他人都没有获得动画，我该怎么办？

这是我用于txt类的动画代码：

-webkit-animation: aniload 1s;
-moz-animation: aniload 1s;
-ms-animation: aniload 1s;
-o-animation: aniload 1s;
animation: aniload 1s;
@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}
}

您可以延迟其他动画 http://jsfiddle.net/o3yftL2o/2/

.txt_a{
-webkit-animation: aniload 1s;
-moz-animation: aniload 1s;
-ms-animation: aniload 1s;
-o-animation: aniload 1s;
animation: aniload 1s;
-webkit-animation-delay:1s;
}
@-webkit-keyframes aniload {
  0% {-webkit-transform:translate(0px, 1000px)}
 100%  {-webkit-transform:translate(0px, 0px)}
}
 .txt_b{
-webkit-animation: aniload2 1s;
-moz-animation: aniload2 1s;
-ms-animation: aniload2 1s;
-o-animation: aniload2 1s;
 animation: aniload2 1s;
-webkit-animation-delay:.5s;
}
 @-webkit-keyframes aniload2 {
 from {-webkit-transform:translate(0px, 1000px)}
to   {-webkit-transform:translate(0px, 0px)}
}
 .txt_c{
-webkit-animation: aniload3 1s;
-moz-animation: aniload3 1s;
-ms-animation: aniload3 1s;
-o-animation: aniload3 1s;
animation: aniload3 1s;
-webkit-animation-delay:0s;
}
@-webkit-keyframes aniload3 {
 from {-webkit-transform:translate(0px, 1000px)}
to   {-webkit-transform:translate(0px, 0px)}

}

相关文章：