I just discovered CSS3 Animation and I am quickly becoming obsessed.
CSS3 makes DOM animations really easy. I can move things around, shrink or enlarge text and images, make buttons and links “pop” on hover, and help the user focus on the most relevant information. This can all be done through CSS3.
DISCLAIMER: Contrary to the title of this article, I am less of a Picasso and more of a dog making “art” all over your brand new rug.
Do you see that ball up there? If you can’t, go check out the jsfiddle. The concepts are so simple an embedded programmer could do it. Let’s look at the
animation- tags on the ball first:
1 2 3 4 5 6
- The length of time the animation will take to complete.
- Example: 10s
- A unique name for the animation we want to use. If you write good animations, you might be able to reuse them later.
- Example: rollout
- The number of times the animation should run. Default 1.
- Example: infinite
Note that there are several other
animation- attributes to give you more control, but we only need a few in this case. For a more in-depth look at these attributes and their constituents, I advise you to check out this MDN article. Also, note that at this point Google’s Chrome browser still requires
-webkit- prefixes on animation objects. Hopefully they join the rest of the modern world soon.
animation- attributes let us configure our usage of an animation, but the real guts of the animation come from the definition inside a
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Note the name
rollout is the same as the
animation-name attribute we set on
.ball previously. This is the definition of our animation at different timeframes. What this says:
- 25% of the way through the animation, the object should have
margin-leftof 47%, putting it in the middle of the page.
- 50% of the way through the animation, the object should have
margin-leftof 94%, putting it at the far right of the page.
- 75% of the way through the animation, the object should have
margin-leftof 47%, putting it in the middle of the page again.
- 100% of the way through the animation, the object should have
margin-leftof 0%, putting it back where it started.
This is easy and relatively readable. I can see exactly what is supposed to be going on and when.
animation- attributes give you a lot of control over animations, there are several other tools available. CSS Transitions are animations that are performed between two distinct states. This is especially helpful when you want to run an animation after some event happens. When I click this button, I add a class to my ball to make it move to the right. I click it again and the ball moves to the left. You can see the fiddle below or view it on jsfiddle.
The important CSS here is
transition and the
1 2 3 4 5 6 7 8 9 10
When my DOM object has the
ball class, a transition will begin to set the
margin-left to 0% over a period of 3 seconds. When the
rollout class is applied, a transition begins which brings the
margin-left to 94% over another 3 seconds. The transition knows to apply the given CSS attribute as found in the last-applicable style definition.
Transitions are really great for single page applications - as I switch contexts in my application, I move my DOM elements around or I gradually hide them from view. When I get time to release my next homemade application, expect to see lots of little animations. Probably way more animations than necessary - just bear with me.
There are many other CSS animation topics, but I don’t quite have the experience to elaborate. Transforms give you really easy ways to rotate, skew, and translate objects, even allowing for the creation of 3-dimensional CSS objects. The
from shorthand in
@keyframes elements can make reading animations even easier. I may be a little late to the party, but the world created by CSS3 and HTML5 is a much better one for programmers and (hopefully) for end-users.