CSS animation-fill-mode
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!
![Designing for Simplicity]()
Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...
![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...
![Duplicate the jQuery Homepage Tooltips Using Dojo]()
The jQuery homepage has a pretty suave tooltip-like effect as seen below:
Here's how to accomplish this same effect using Dojo.
The XHTML
The above HTML was taken directly from the jQuery homepage -- no changes.
The CSS
The above CSS has been slightly modified to match the CSS rules already...
![Fading Links Using jQuery: dwFadingLinks]()
UPDATE: The jQuery website was down today which caused some issues with my example. I've made everything local and now the example works.
Earlier this week, I posted a MooTools script that faded links to and from a color during the mouseover and mouseout events.
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
> 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.
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