Click here to Skip to main content
11,720,785 members (69,805 online)
Click here to Skip to main content

Tagged as

CSS3 Animations

, 16 Dec 2011 CPOL 9.1K 5
Rate this:
Please Sign up or sign in to vote.
CSS3 animations

CSS3 Animations

CSS3 AnimationsLately, I’m involved in a very interesting HTML5 project which I’ll tell you about in the future. Meanwhile, I get to “play” with HTML5 and CSS3 specifications. One of the new interesting CSS3 specifications is probably the CSS3 animations. Do these things ring a bell – animated images, simple animation with Flash or JavaScript. If so, this post is for you.

Why to Use Animations?

Most of the Web sites and applications today use animations. You can find them in marketing ads embedded inside a site, in animated images while waiting for something like download to finish and in many other places. The added value of animation is that it draws the user’s attention. This is also its drawback since overusing animations can cause distraction and might draw users from the Web site or application. In the past, if you wanted to use animations, you could use animated images, Flash or JavaScript. Today with HTML5, that isn’t necessary. You can use Canvas, SVG or even CSS to achieve the same results.

What is CSS3 Animations?

CSS3 introduces a new CSS module which is called CSS Animations Module Level 3. The module describes how to create simple animations using CSS3 new properties. CSS3 animations are defined with a new @keyframes rule which define the frames of the animation. Combined with the animation properties, you can achieve simple animations that are composed of style changes only.

Defining the Animation

In order to define the animation, you will use the @keyframes rule and give it a meaningful name. Inside the @keyframes block, you must specify a starting and ending point for the animation. You do that using 0% or from value for the starting point and 100% or to value for the ending point. You can also create frames by specifying their percentage in the animation itself. Here is a simple animation definition:

@keyframes changeBackground 
<span class="code-none">{
   from { background-color<span class="code-none">: white<span class="code-none">; <span class="code-none">}
   50% <span class="code-none">{ background-color<span class="code-none">: green<span class="code-none">; <span class="code-none">}
   to <span class="code-none">{background-color<span class="code-none">: white<span class="code-none">; <span class="code-none">}
}</span>

The animation here just changes the background from white to green during the running of the animation. You can use any CSS property to create your animations.
Defining the animation isn’t sufficient since it does nothing. In order to run the animation, you will use the animation properties to set it to a DOM element.

The Animation Properties

There are a set of animation functions that are specified in the specification such as animation-name and animation-duration. I prefer to use the shorten animation property that includes those functions. The animation property gets 6 different parameters which are name, duration, timing function, delay, iteration count and direction. If the duration is omitted, then its default value is 0 and the animation won’t run. Also if the name is ‘none’ value, that will stop a running animation. Here is an example of setting the animation property on some element with the animatedDiv id:

#animatedDiv
<span class="code-none">{
   animation<span class="code-none">: changeBackground 2s linear 1s infinite alternate<span class="code-none">;
<span class="code-none">}</span>

The animation will run the animation that was defined earlier, for 2 seconds duration, with a linear timing function, with a delay of 1 second, infinite and the direction will be alternate.

Pay attention that most of the browsers added CSS3 animation with their prefix so the previous code won’t work in all browsers. For example, chrome uses the @-webkit-keyframes rule and the –webkit-animation property prefixes.

Summary

CSS3 animations can help to reduce the use of animated images and the use of plug-ins for simple animation. It defines a simple animation model which can be set by defining the animation with the @keyframes rule and using them on elements with the animation properties.


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gil Fink
Technical Lead sparXys
Israel Israel
Gil Fink is a web development expert and ASP.Net/IIS Microsoft MVP. He is the founder and owner of sparXys. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also co-author of several Microsoft Official Courses (MOCs) and training kits, co-author of "Pro Single Page Application Development" book (Apress) and the founder of Front-End.IL Meetup. You can read his publications at his website: http://www.gilfink.net

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
HaBiX19-Dec-11 22:31
memberHaBiX19-Dec-11 22:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150901.1 | Last Updated 16 Dec 2011
Article Copyright 2011 by Gil Fink
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid