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!
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![9 More Mind-Blowing WebGL Demos]()
With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities. I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...
![JavaScript Copy to Clipboard]()
"Copy to clipboard" functionality is something we all use dozens of times daily but the client side API around it has always been lacking; some older APIs and browser implementations required a scary "are you sure?"-style dialog before the content would be copied to clipboard -- not great for...
![AJAX For Evil: Spyjax with jQuery]()
Last year I wrote a popular post titled AJAX For Evil: Spyjax when I described a technique called "Spyjax":
Spyjax, as I know it, is taking information from the user's computer for your own use — specifically their browsing habits. By using CSS and JavaScript, I...
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