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
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    CSS Scoped Styles

    There are plenty of awesome new attributes we've gotten during the HTML5 revolution:  placeholder, download, hidden, and more.  Each of these attributes provides us a different level of control over an element on the page, but there's a new element attribute that allows...

  • By
    Create a Dojo Lightbox with dojox.image.Lightbox

    One of the reasons I love the Dojo Toolkit is that it seems to have everything.  No scouring for a plugin from this site and then another plugin from that site to build my application.  Buried within the expansive dojox namespace of Dojo is

Discussion

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

  2. 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!