发布于2021-06-16 00:17 阅读(1174) 评论(0) 点赞(19) 收藏(3)
在每个 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)}
}
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/128711/1fd73d84218c76a52c69/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!