Introduction
Even though CSS3 is not supported on all browsers yet, many web developer have started to use some of the techniques that it provides. CSS3 has evolved into a technology which, when combined with HTML5 and JavaScript, may end up being a Flash-killer. In this series of articles, we will cover the key additions to CSS3. In the previous article, we learned about 3D transformations in CSS3; and today bring transitions to life by animating them.
The main reason for developers to use Flash is that it allows them to animate objects on the page. As an non-Flash alternative, many developers started to use Javascript to move objects on the page. While it works in theory, the transitions are not smooth and requires lots of code which also slows down the load time of the page. To solve this problem, CSS3 brings to you keyframe animation which allows you to write animations in CSS that can be reused on various objects multiple times.
@Keyframe Rules
Keyframe rule is where you define the animation in CSS3. The keyframe rule will have a name which you apply in an element style definition. Before we proceed, it is worth mentioning that keyframe rules and animation are available only on Mozilla Firefox, Chrome and Safari – in other words, Mozilla and WebKit based browsers. Internet Explorer and Opera have still not included them in their engines.
{
from {background: yellow;}
to {background: red;}
}
@-moz-keyframes heatup
{
from {background: yellow;}
to {background: red;}
}
@-webkit-keyframes heatup
{
from {background: yellow;}
to {background: red;}
}
Click here to see a working example of the above keyframe rules.
Specifying the keyframe rule with the ‘from’ and ‘to’ keywords, tells the browser the beginning and end states of the animation. Sometimes it is useful to have a more granular definition of the animation. To do so, you can specify when the change will happen in percent. For example, we want the box to change from red to orange gradually and then quickly to green.
{
0% {background: red; left: 0;}
70% {background: orange; left: 280px;}
100% {background: green; left: 400px;}
}
Click here for an example of the above code.
Animation
After defining the animation using the keyframe rule, we need to apply it to elements on the page. This is done with the animation properties. As with all properties, CSS has a shorthand property – animation, that allows us to define all properties except one – animation-play-state. Here are the properties with the explanation.
- animation
- Shorthand property for all the the animation properties, except the animation-play-state property.
- animation-name
- Specifies the name of the @keyframes animation
- animation-duration
- Specifies how many seconds (s) or milliseconds(ms) an animation takes to complete one cycle. Default: 0
- animation-timing-function
- Describes how the animation will progress over one cycle of its duration. Default “ease”. Other options: linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n).
- animation-delay
- Specifies the duration to wait before the animation starts. Default: 0
- animation-iteration-count
- Specifies the number of times an animation is played. Default: 1
- animation-direction
- Specifies whether or not the animation should play in reverse on alternate cycles. Default: “normal”
- animation-play-state
- Specifies whether the animation is running or paused. Default: “running”
Conclusion
There you go! You can now animate your site without using Flash. The means that your site is already iOS compatible without any hacks. This certainly opens up new avenues for us, web developers. With transformations and keyframe animation there is very little left that we can’t do on the web – at least in theory. I agree that we can’t rule out Flash in its entirety, but keyframe animations are certainly a step towards that day.
