gpt4 book ai didi

javascript - 在下一个 flexslider 幻灯片中滑动后,css 动画不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 13:15:38 25 4
gpt4 key购买 nike

在每个 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)}

关于javascript - 在下一个 flexslider 幻灯片中滑动后,css 动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27062842/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com