CSS animation-fill-mode

By  on  

We're always super excited to get into CSS animations because, quite frankly, they're incredibly awesome.  One overlooked animation property, however, is the animation-fill-mode property.  This CSS property sets the state of the end animation when the animation is not running.  Here's a quick example:

@keyframes fadeIn{
	0% { opacity: 0 }
	100% { opacity: 1 }
}

.fadeIn {
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

In the case of my fadeIn animation, I want the element to stay at an opacity of 1 when the animation is complete.  If I don't set the value to forwards, the element would go back to an opacity of 0 after the animation runs.  In most cases, you'll likely want the the value of animation-fill-mode to be forwards, so don't forget to add it!

Recent Features

  • By
    From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

Discussion

  1. MaxArt

    Indeed, animation-fill-mode defaults to “none”, which means no animation style is applied when the animation starts or ends. You could expect “forwards” to be the default one, but… nope.

    The other values are “backwards” and “both”. Cue to MDN page:
    https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

  2. tomByrer

    > You could expect “forwards” to be the default one, but… nope.

    This is why Max: http://www.w3.org/TR/css3-animations/

    > The keyframes specify the behavior of one cycle of the animation… If a 0% or “from” keyframe is not specified, then the user agent constructs a 0% keyframe using the computed values of the properties being animated. If a 100% or “to” keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.
    > …by default an animation does not affect property values after the animation ends. The ‘animation-fill-mode’ property can override this behavior.

    So, it is assumed that the non-animated state is the ‘default’ resting state for the animation.

  3. This definitely helped me out a few times. I also like the “animation-direction” property, it can lead to interesting effects: http://cdpn.io/Kdslg

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!