I need help with a CSS3/JS issue.
Currently, I am working with FlexSlider and attempting to create an animation as shown in this jsFiddle
You can find the code here: https://jsfiddle.net/v7zvzkp1/
What I'm trying to achieve is an animation that involves text appearing with a bounceInFromLeft effect and then exiting with a bounceOutLeft effect. This should happen for each slide, where the next one also starts with the same animation sequence.
However, when I click on the previous or next buttons of the slider, the animation doesn't restart but rather continues. I'm unsure of what I'm doing wrong. Can someone kindly point out the issue and suggest a solution?
Here's my sample HTML:
<div class="flexslider left">
<ul class="slides">
<li>
<img src="https://coronalabs.com/wp-content/uploads/2013/04/Dilbert_page_img2.png" >
<div class="meta">
<h1>Test header</h1>
<div class="category">
<p>READ MORE 1</p>
</div>
<div class="btn btn-slide btn-animation">MORE </div>
</div>
</li>
<li>
<img src="https://www.walldevil.com/wallpapers/w04/thumb/116610-calvin-and-hobbes-calvin-amp-hobbes-comic-strip.jpg" >
<div class="meta">
<h1>Test header 2</h1>
<div class="category">
<p>READ MORE 1</p>
</div>
<div class="btn btn-slide btn-animation">MORE </div>
</div>
</li>
<li>
<img src="https://i.ytimg.com/vi/XHwMzZqRGZ8/maxresdefault.jpg">
<div class="meta">
<h1>Lorem ipsum dolor sit amet, consectetur.</h1>
<div class="category">
<p>READ MORE 2</p>
</div>
<div class="btn btn-slide btn-animation">MORE2 </div>
</div>
</li>
</ul>
Below is the corresponding style:
img {
width: 300px;
max-height: 200px;
}
.flex-direction-nav {
display: inline-block;
margin-bottom: 20px;
width: 100%;
}
.meta h1,
.meta p {
animation: bounceInLeft 6500ms;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
opacity: 0;
}
@keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
30% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
40% {
opacity: 1;
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
55% {
opacity: 1;
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(20px, 0, 0);
}
65% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
As expected, I am initializing the flexslider using jQuery:
$('.flexslider').flexslider({
animation: "fade",
controlNav: false
});