Keyframes CSS Animation Issue Latest Chrome Browser

Question

In the latest version of Chrome browser (Version 33.0.1750.1170), I have animations that have stopped working all of a sudden.

Site: http://multipurpose.joostrap.com/

There is an area for Testimonials that should transition in some div's. i.e.

<div class="testimonial-box fadeInLeft animated">

I thought the issue might be @-webkit-keyframes in the CSS file, but it doesn't look to be this.

Is anyone else having this trouble with the latest Chrome browser or maybe have a fix?

EDIT: I have changed the site to use the un-minifeid css version of the css. The relevant files are 'animations.css' and 'combined.css'. Hope this helps.

Answer 1

Simple answer

I think you are trying to get stuff to fade in from 0 opacity with a bit of a slide, no?

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

What you need to add is animation-fill-mode: forwards so that it sticks on the last frame of the animation.

You can see an example (webkit only) here on jsFiddle.

Explanation

When you run an animation in CSS, the browser will automatically return the element to the state it was in before the animation. This can be frustrating and not always intuitive.

So what you were seeing wasn't that the animation wasn't running (it was), but that by the time you scroll down it had finished animating and put it back to its original state (with opacity set to 0).

So you have two options:

1. You can remove the opacity from the CSS. Problem is that it might 'flash' before starting the animation. This wouldn't be a problem in your case since the content is below the fold to begin with. But it's bad practice because that might be an issue with future similar implementations.

2. The other is to leave the element as it appears in the last frame of its CSS animation. This is why I proposed animation-fill-mode: forwards. This does exactly that! I suppose this isn't the default because it might require more memory consumption but I haven't seen any evidence to prove it (not that I've looked for it).

As An Aside

Regardless, nobody will see your animation as it's below the fold. I suggest you detect how far the user has scrolled, and add that animation property once the user has reach the Testimonials. This way, it will only "fadeInLeft" when the user can see it!

You can use this code to do this: http://jsfiddle.net/R2YD9/2/ (Requires jQuery)