Question

在每个flexslider列表中，我有一个名为class =＆＃34; txt＆＃34;，

的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>

但只有第一类=＆＃34; txt＆＃34; flexslider列表是动画下面的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)}
}

Answer 1

您可以延迟其他动画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)}

}

在下一个flexslider幻灯片中滑动后，css动画无效

1 个答案: