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!
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
Firefox OS is all over the tech news and for good reason: Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript. Firefox OS has been rapidly improving...
You've probably been to sites like RapidShare and MegaUpload that allow you to download files but make you wait a specified number of seconds before giving you the download link. I've created a similar script but my script allows you to animate the CSS font-size...
It's important to construct your websites in a fashion that lends well to print. I use a page-break CSS class on my websites to tell the browser to insert a page break at strategic points on the page. During the development of my...
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