CSS3 Animations
I recently wrote about CSS3 Transitions and the next step for that is sort of CSS Transitions on steroids: CSS3 Animations (CSS Animations Module Level 3 specification).
What are CSS Animations?
CSS Animations offers a more detailed way to control animations, the number of times it should iterate and property values at certain keyframes.
A simple example
Let’s take a look at the code for a simple CSS3 Animations example:
.animation-container { -webkit-animation-name: movearound; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-timing-function: ease; } @-webkit-keyframes movearound { from { width: 200px; background: #f00; opacity: 0.5; -webkit-transform: scale(0.5) rotate(15deg); } to { width: 400px; background: #ffffa2; opacity: 1; -webkit-transform: scale(1) rotate(0deg); } }
There are a number of new things we see above. First, the .animation-container
element has a few CSS properties defining the name of the animation (I’ll get back to that), how long it should take to complete, how many times it should perform the entire animation (keyword infinite
used here), the direction of it and the easing-function.
The most interesting part here is the animation name, which is, contrary to what you might believe, any name of your choosing. This name is then referenced in the new part using the @
character (and vendor-prefix) to specify a keyframes section. Within here you can set the starting CSS property values for the element in the animation, and the ending ones.
In this example, the element will rotate to being straight, fade in and become twice as wide at the end of the animation.
Using keyframe values and iteration-count
In another example, we will use a shorthand syntax, keyframe values for a specific amount into the animation and a set iteration count. The code for the CSS3 Animation example with percentage looks like this:
.animation-container { height: 60px; padding: 10px; /* Shorthand syntax */ -webkit-animation: movearound 4s ease 3 normal; } @-webkit-keyframes movearound { 0% { width: 200px; background: #f00; opacity: 0.5; -webkit-transform: scale(0.5) rotate(15deg); } 30% { width: 300px; background: #f00; opacity: 1; -webkit-transform: scale(1.3) rotate(15deg); } 60% { width: 100px; background: #00f; opacity: 0.3; -webkit-transform: scale(0.3) rotate(15deg); } 100% { width: 400px; background: #ffffa2; opacity: 0.5; -webkit-transform: scale(1) rotate(0deg); } }
First, we see the easy-to-use shorthand syntax for the animation
property where the name, duration, easing method, number of iterations and direction is specified all in one line. Then, in the keyframes section, you can see a number of percentage values, whichever you want to use, that will set the CSS properties for the element when that much percentage of the animation has taken place.
In this example, the element starts small, scales big, then smaller than when it started and then ends with a normal size. It’s also complemented by some rotating and background color shifting.
More advanced example
If you want something more advanced than this, i recommend looking at the WebKit team’s falling leaves example where a mixture of mainly CSS Animations and JavaScript creates a nice example.
The CSS3 test suite
Above tests (except for the leaves) and a number of other CSS3 examples are available in my CSS3 test ground, where I also try to find alternate solutions to make some the things work in IE as well.
Web browser support
CSS Animations are only available in WebKit-based web browsers, mainly meaning Google Chrome and Safari. From what I have heard, I have no indication that any other web browser vendor is working on this. However, since everyone but Microsoft have decided to implement CSS Transitions, this seems like the next logical step.
I usually only blog about things available in most web browsers, but I believe this native animation approach will be very good from a performance-perspective (especially on mobile devices and iPad and other tablet computers) and also very easy to create, so it is something well worth considering.
Meanwhile I have discussed CSS animations with the CSS WG and I have a counter proposal.
Lars,
It's a valid point, and I like your suggestions. With all the wheels in motion, though, and CSS Transitions already in WebKit, Opera and soon Firefox, I think it's perhaps too late to expect any changes.
To be clear, I do think simple transitions should be in CSS. Animations with keyframes and a whole slew of other settings is a different feature, IMO.
At the very least, I think the DOM community should discuss this with the CSS WG. They are having discussions about syntax, but neglect the use cases. Those should come first.
Lars,
I don't know if there have been one already within the group, but I agree that there should be one.
CSS animations work in Minefield – Firefox 3.7a (isn't that now becoming FF4.0? Anyway…). They work with the -moz- prefix so hopefully we will be seeing some sort of standardisation between the two vendors.
Jordan,
No, that's CSS Transitions, not animations. Not sure if Mozilla will ever support the keyframe approach.
Hi, and thanks for the good article. I'm not sure I'm 100% on-board, however with the blurring of the "display layer" of CSS and the "interaction" layer, which is often JavaScript of some variant.
I'm a strong-believer in separation between the content, visuals, and interactions in a progressive-enhancement / graceful-degradation sort-of-way.
I can see where some simple CSS animations would be useful, however, especially in the case of simple sites that would have no other need for JavaScript.
So, yes, conflicted. What are your thoughts?
Lars kinda stole the show, as he posted every concern i (and many other people) have.
CSS Animations Module are not fitting the ideology of CSS. At all.
You should not describe the core behaviour of your site, with mere style.
Would be much better if the module will be transformed into something like html5 canvas (which is also a webkit team invetion, btw).
Tim, Constantine,
I agree, there have been numerous discussions about whether this belongs in CSS or not. It's hard to say, though, because some of it is not interaction either, and doesn't always fit in javaScript either, but is rather an example of richer style/visual presentation.
So, basically, my stance towards it varies from day to day. 🙂
Thank you – this was the first tutorial that was clear enough for me to follow. Managed to get my own OS X dock bouncing style animation working correctly on http://www.imagexyapp.com from it.
Jacob,
Great, glad it was useful!
[…] […]
[…] “CSS3 Animations,” Robert Nyman […]
[…] “CSS3 Animations,” Robert Nyman […]
[…] “CSS3 Animations,” Robert Nyman […]
[…] “CSS3 Animations,” Robert Nyman […]
[…] “CSS3 Animations,” Robert Nyman […]
[…] “CSS3 Animations,” Robert Nyman […]
[…] “CSS3 Animations,” Robert Nyman […]
[…] “CSS Animations Module Level 3,” W3C * “CSS3 Animations,” Robert Nyman * “CSS3 Animator,” Anthony Calzadilla A website “dedicated solely to […]
[…] “CSS Animations Module Level 3,” W3C * “CSS3 Animations,” Robert Nyman * “CSS3 Animator,” Anthony Calzadilla A website “dedicated solely to […]
[…] I recently wrote about CSS3 Transitions and the next step for that is sort of CSS Transitions on steroids: CSS3 Animations ( CSS Animations Module Level 3 specification ). What are CSS Animations? CSS Animations offers a more detailed way to control animations, the number of times it should iterate and property values at certain keyframes. A simple example CSS3 Animations – Robert's talk […]
[…] “CSS3 Animations,” Robert Nyman […]
Hi Robert, I know this article is a couple of years old – but as it’s listed as a resource on caniuse.com it might be worth editing a little to make sure the examples don’t use only -webkit- properties. Just sayin’ 🙂
-Hallvord
Hallvord,
Good point. I’ve updated the article with a note about that and a link to up-to-date information.
It does appear that you do still require vendor prefixes to make animation work in Chrome and Firefox. IE11 does not need a vendor prefix.
Yeah, that might still unfortunately be the case.