How to ensure that when previous next buttons clicked on a Flexslider animation restarts?

Question

I have question about css3/js.

I am using FlexSlider and trying to build an animation as can be seen from this jsFiddle

https://jsfiddle.net/v7zvzkp1/

Now, what I am trying to do is that there is an animation with slide.. * Text bounceInFromLeft, and then text bounceOutLeft (to exit) * Next Slide appears as well as the "bounceInLeft and then bounceOutLeft" animation starts

I want the same to happen for click of the slider previous/next button. However, when I click the prev/next buttons, the animation does not restart. Rather continues...

I am confused as to what I am doing wrong. Can any kind sould point out and let me know what/how I can solve this.

My sample html is as following

<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>

And the corresponding style is at follows

    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);
    }
} 

Ofcourse I am calling the flexslider through jQUery

$('.flexslider').flexslider({
    animation: "fade",
    controlNav: false
});

Answer 1

thanks for your question

I came up with a relatively simple solution.

In short - all you have to do is use the "currently active slide" class and apply the animation to it - not to every p or h1 element out there.

Take a look at your reworked fiddle and click around the next/prev buttons.

.slides .toAnimate{
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
}
.flex-active-slide .toAnimate {
  animation: bounceInLeft 6500ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  opacity: 0;
}

Also, please notice the starting transform on p and h1 elements (with added toAnimate class, for simpler and more readable CSS code). They have to be set in the starting position or you'll see a FOUT.

One more thing: Keep your animation-iteration-count equal to 1.

Hope this helps :)