Learn CSS3 From A – Z: Keyframe and Animations

 

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.

@keyframes heatup

{

    

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.

@keyframes traffic

{

    

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.