jquery - 在 slider 的每张幻灯片上启动 css3 动画

Question

我在我的元素中使用了 flex slider 。

我做了 3 个 css3 动画，当网站加载时，动画在第一张幻灯片上运行完美，但是当切换到第二张幻灯片时，动画没有启动。

当幻灯片正在滚动时，我需要帮助来启动 css 动画。

我的代码 js - 初始化 slider :

$(window).load(function(){
    $('._il_slider_box_wrapper_').flexslider({
        animation: "slide",
        start: function(){
            $('._il_slider_box_wrapper_').resize();
        }
    });
});

我的 html:

    <ul class="slides">
        <li>
            <img src="../main_slide_tab_1.jpg" style="margin-bottom: -4px;" class="_il_slider_box_wrapper_img_" />

            <span class="_il_slider_box_slide_wrapper_"></span>

            <span class="_il_slider_box_slide_box_">

                <span class="_il_slider_box_slide_box_block_">
                    <span class="_il_slider_box_slide_box_sub_">
                        <span class="_il_slider_box_slide_box_icon_block">
                            <span class="_il_slider_box_slide_box_icon_">
                                <img src="../_il_lock_icon_slide_.png" style="width: 75px;margin-top: 30px;" />
                            </span>
                        </span>
                        <span class="_il_slider_box_slide_box_title_">Segregated Bank Accounts</span>
                    </span>

                </span>

            </span>

        </li>

    </ul>

我想在每张幻灯片上开始的动画是这些元素:

._il_slider_box_slide_box_icon_
._il_slider_box_slide_box_title_

类 ._il_slider_box_slide_box_icon_ 的 css

._il_slider_box_slide_box_icon_{  
  -webkit-animation: _il_animation_roll_ 1s ease-out both, _il_animation_fadeIn_ 1s ease-out both;
  -moz-animation: _il_animation_roll_ 1s ease-out both, _il_animation_fadeIn_ 1s ease-out both;
  -o-animation: _il_animation_roll_ 1s ease-out both, _il_animation_fadeIn_ 1s ease-out both;
  -ms-animation: _il_animation_roll_ 1s ease-out both, _il_animation_fadeIn_ 1s ease-out both;
  animation: _il_animation_roll_ 1s ease-out both, _il_animation_fadeIn_ 1s ease-out both;
}

类 ._il_slider_box_slide_box_title_ 的 css

._il_slider_box_slide_box_title_{
  -webkit-animation: _il_animation_moveUp_ 1s ease-in-out both;
  -moz-animation: _il_animation_moveUp_ 1s ease-in-out both;
  -o-animation: _il_animation_moveUp_ 1s ease-in-out both;
  -ms-animation: _il_animation_moveUp_ 1s ease-in-out both;
  animation: _il_animation_moveUp_ 1s ease-in-out both;
}

关键帧

@-webkit-keyframes _il_animation_roll_{
  0% {-webkit-transform: translateX(-500px) rotate(-360deg);}
  100% {-webkit-transform: translateX(0px) rotate(0deg);}
}
@-moz-keyframes _il_animation_roll_{
  0% {-moz-transform: translateX(-500px) rotate(-360deg); opacity: 0;}
  100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-o-keyframes _il_animation_roll_{
  0% {-o-transform: translateX(-500px) rotate(-360deg); opacity: 0;}
  100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-ms-keyframes _il_animation_roll_{
  0% {-ms-transform: translateX(-500px) rotate(-360deg); opacity: 0;}
  100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@keyframes _il_animation_roll_{
  0% {transform: translateX(-500px) rotate(-360deg); opacity: 0;}
  100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
}


@-webkit-keyframes _il_animation_fadeIn_{
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-moz-keyframes _il_animation_fadeIn_{
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-o-keyframes _il_animation_fadeIn_{
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-ms-keyframes _il_animation_fadeIn_{
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes _il_animation_fadeIn_{
  0% {opacity: 0;}
  100% {opacity: 1;}
}


@-webkit-keyframes _il_animation_moveUp_{
  0% {-webkit-transform: translateY(40px);}
  100% {-webkit-transform: translateY(0px);}
}
@-moz-keyframes _il_animation_moveUp_{
  0% {-moz-transform: translateY(40px);}
  100% {-moz-transform: translateY(0px);}
}
@-o-keyframes _il_animation_moveUp_{
  0% {-o-transform: translateY(40px);}
  100% {-o-transform: translateY(0px);}
}
@-ms-keyframes _il_animation_moveUp_{
  0% {-ms-transform: translateY(40px);}
  100% {-ms-transform: translateY(0px);}
}
@keyframes _il_animation_moveUp_{
  0% {transform: translateY(40px);}
  100% {transform: translateY(0px);}
}

Answer 1

发布您的代码 CSS 代码，这样我们就可以看到，动画是 CSS 而不是 JS。

//注意:您可以使用 CSS3 @keyframe 动画在没有 JS 的情况下构建整个 slider 。