I have integrated flex slider into my project.
There are 3 CSS3 animations implemented, where the animations work perfectly on the first slide when the website loads. However, upon switching to the second slide, the animations do not start.
I am seeking assistance in initiating the CSS animations while the slideshow transitions between slides.
Below is my JavaScript code for initializing the slider:
$(window).load(function(){
$('._il_slider_box_wrapper_').flexslider({
animation: "slide",
start: function(){
$('._il_slider_box_wrapper_').resize();
}
});
});
Here is a snippet of my HTML structure:
<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>
The CSS animations that need to run on every slide involve these elements:
._il_slider_box_slide_box_icon_
._il_slider_box_slide_box_title_
Here is the CSS styling for the class ._il_slider_box_slide_box_icon_:
._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;
}
The CSS styling for the class ._il_slider_box_slide_box_title_ is as follows:
._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;
}
Keyframes definitions for the animations:
@-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);}
}