程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

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

发布于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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

19 0
收藏该文
已收藏

评论内容:(最多支持255个字符)