After sliding in next slide flexslider css animation not working
In each flexslider I have a div called class = "txt"
and so I need to animate this txt class in each flexslider list example:
<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>
But only the first class = "txt" in the flexslider list will animate the css below, the others in the list, when I click further, don't get the animation, what should I do?
Here is the animation code I am using for the txt class:
-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)}
}
+3
source to share
1 answer
You can defer other animations 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)}
}
0
source to share