Controlling animation using CSS3

Transition and animation control is new to Cascading Style Sheets Level 3, CSS3. With a basic understanding of CSS you can add animation to your Web site without needing to know complex JavaScript or use a jQuery library. The goal of this article is to explain how transitions and animation work in CSS3 and how you can use them to build your own animation sequences.

Using CSS to control movement

Animation on the Web is not new. Using JavaScript you can accomplish some very fancy animation sequences. Just check out jQuery’s animation and transition libraries. The challenge in using JavaScript, SVG or Canvas to insert animation into your Web pages is that the technology is complex. Simple animation cannot be accomplished easily.

Cascading Style Sheets, or CSS, is the tool you use to style your pages. The current working draft for CSS is CSS Level 3, or CSS3, and it is dramatically extending the role of CSS and styles in your Web site. There are many new pieces to CSS3 but few of them stand out as dramatically as the new tools that enable you to animate your content.

CSS3 provides support for three new styles that add movement to your content. They are split into three categories:

• Transitions
• 2D Transforms
• Animation

There is a debate raging about whether or not animation should be included within CSS. The argument goes something like this: animation should be controlled at the DOM level. For complex animation, as you would normally see in Flash or SilverLight, I completely agree. However, I believe there is room for simple animation controlled through CSS properties. CSS is easy to learn and easy to modify.

At the time of writing this article, only WebKit based browsers and Opera browser support CSS3 animation, transforms and transitions. This means you need to be running Apple’s Safari or Google’s Chrome. Currently, Google’s Chrome appears to render the animations more smoothly on a Windows PC and Safari is smoother on a Mac. FireFox does not support transforms or transitions. Microsoft is pledging support for CSS3 with IE9, but it is not being clear about its support for transitions/transforms.

The good news is that the browsers on your iPhone, iPod Touch, Android Phone, WebOS (Palm Pre) and iPad already support these animation effects. Interestingly, CSS3 animations render faster on mobile devices than JavaScript/Canvas equivalent animation effects.

Controlling Transitions

The simplest animation effect you can use in CSS3 is the Transition. Fundamentally, the transition effect allows you to take an element and change its state from one to another. In other words, you can create some cool fade in and fade out effects.

You control transitions with the following CSS properties:

• transition-property - what will you be controlling, the most common is “opacity”
• transition-duration - the length of time in seconds the transition will take
• transition-timing-function - the animation effect of the transition. You can use ease, linear, ease-in, ease-out, ease-in-out and cubic-bezier where you can define your own custom effect
• transition - you can use the shortened property to define all effects in one line

There are two pieces of CSS you need to control your animation. The first describes the CSS effect on an element or class. The second set of CSS properties trigger when the effect will take place. The following CSS applies the transition properties for WebKit and Opera browsers to use:

   
p {
   opacity: 1;
 -webkit-transition-property:opacity;
 -webkit-transition-duration:1s;
 -webkit-transition-timing-function: linear;
 -o-transition-property:opacity;
 -o-transition-duration:1s;
 -o-transition-timing-function: linear;
}
p:hover {
   opacity: 0;
}

Insert the following HTML into a Web page:

   
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Insert these elements into your page. What you will find is that as you roll your cursor over the paragraph the text will fade away. The fade will take 1 second. You can also re-create the same transition effect with the following CSS using the short hand method of defining the transition for both WebKit and Opera browsers:

 
p {
   opacity: 1;
 -webkit-transition:opacity 1s linear;
 -o- transition:opacity 1s linear;
}
p:hover {
   opacity: 0;
}

The transition property does allow you to transition more than one property. You can use the “all” value to allow all properties to transition. The following will change the color, size and font-style of the text as you roll over it:

 
p {
 	background-color: #red;
 	border: thick groove #800000;
 	width: 500px;
 	padding: 5px;
 	font-size: small;
 	color: yellow;
 	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
 	-webkit-transition: all 1s linear;
 	-o-transition: all 1s linear;
 
}
p:hover {
 	background-color: yellow;
 	font-family: "Courier New", Courier, monospace;
 	font-size: xx-large;
 	color: #FF0000;
}

The properties that are affected by the transition are: background-color, font-family, font-size and color.

The following image shows you what the text will look like before the transition:

When you roll your cursor over the text, the transition will change the text to the following:

The working draft for CSS3 transitions currently allows you to apply transitions to the following CSS properties:

The Transition property is the simplest animation you can accomplish with CSS, but, as you can see, you can do a lot with it.

Using Transforms

The role of the transform property is to change visual presentation of the element on the Web page. For instance, the transform property can change the position of the element, the rotational angle, the skew and scale.

The transform property does not need to be used with animation. For instance, the following transform property will reposition the element on the page at a 45 degree angle:

 
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
  
  

The transform property allows you to control the following properties:

While the transform property gives you some exciting ways in which to control the presentation of your content, things really get fun when you combine the transform property with the transition property. When you do this, you can animate the transition over time. Let’s take the following:

 

p {
 	background-color: #red;
 	border: thick groove #800000;
 	width: 500px;
 	padding: 5px;
 	font-size: small;
 	color: yellow;
 	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
 	-webkit-transition: 1s ease-in;
 	-o-transition: 1s ease-in;
}

  

At the bottom of the CSS you can see that the transition property is describing that a transition will take 1 second using the ease-in animation effect. Now, add the following:

 
p:hover {
 -webkit-transform:rotate(360deg);
 -o-transform:rotate(360deg);
           }
  

The CSS above will change the P element when you “hover” your cursor over it. The change to the new transformation, however, will not be immediate because you have already added the transition property to the main P definition. What you now get is a very cool rotation as you move your cursor over the text. Copy the following and view this in Google’s Chrome:

 

.rotateStyle {
 	background-color: #red;
 	border: thick groove #800000;
 	width: 500px;
 	padding: 5px;
 	font-size: small;
 	color: yellow;
 	font-family: Geneva, Verdana, sans-serif;
 	-webkit-transition: 1s ease-in;
}
p:hover {
 -webkit-transform:rotate(360deg);
 	}


<p class="rotateStyle">foline kayasada ni ban, kon tu ilocio isidio, iko on xinte illan xolada. Mi ilocio 
utegin alkohol jio, vio falio giuma udeni di. Panni ikuxin agaden ume te, ban du 
bona bengin utegin, pece tolen zumeni zi pin. Vi huro hagen ikuxin puo, co hara 
paimoda con.</p>
  

Using this effect with the Hover class gives you an interesting side effect. The text will rotate when you roll over it. When you move your cursor away, the text will rotate back to its original position, but in reverse. It is kind of like opening and closing a bottle top.

You can play around with the different effects. Add the following to skew the text:

 
    
p:hover {
 -webkit-transform:skew(10deg);
                 }
    

Using the scale effect will grow or shrink the element. The following will shrink the P element down to 1/10^th its original size:

 

p:hover {
 -webkit-transform:scale(0.1);
               }
    

The combination of Transitions and Transform gives you the ability to add some great, quick animations to your Web site.

Using the CSS3 Animation Property

The level of control over your animation increases with use of the Animation property. The animation property gives you the ability to insert a true tween that you normally associate with RIA solutions such as Flash or SilverLight.

As with Transitions and Transforms, there are two parts to the Animation property:

• The description of the animation
• The animation property definition

The first step is to define the animation sequence. Keyframes are used to define the start and end point of your animation. The following illustrates that the HTML element will start in the top left hand corner of the browser and then move to the left 200 pixels and down 150 pixels

 
@-webkit-keyframes bounce {
        from {
           left: 0px;
         }
        to {
           left: 200px;
           top:150px;
         }
       }

    

The next step is to define the properties of the animation. For this, you can use the following properties:

The following is a sample of how this all works:

 
  .animationClass {
 	-webkit-animation-name: bounce;
 	-webkit-animation-duration: 2s;
 	-webkit-animation-iteration-count: 4;
 	-webkit-animation-direction: alternate;
 	-webkit-animation-delay: 1s;
}

      

The following code merges all of this together for you to copy and try in Google’s Chrome or Apple’s Safari:

 


<style media="screen" type="text/css">
@-webkit-keyframes bounce {
        from {
  
           left: 0px;
         }
 
        to {
           left: 200px;
           top:150px;
  
         }
       }
.animationClass {
 	-webkit-animation-name: bounce;
 	-webkit-animation-duration: 2s;
 	-webkit-animation-iteration-count: 4;
 	-webkit-animation-direction: alternate;
 	-webkit-animation-delay: 1s;
}
</style>

<p class="animationClass">The text bounces back and forth </p>

    

OK, this is great for animation sequences where you are animating from one state to another state. At this point you can use the Transition property to accomplish this effect. The Animation property can be extended to allow you to list multiple key frames. The following illustrates how you set keyframes as percentages in your CSS definition:

 
@-webkit-keyframes changingColors {
  0% {
     background-color: red;
     opacity: 1.0;
     -webkit-transform: scale(1.0) rotate(0deg);
   }
  33% {
     background-color: blue;
     opacity: 0.75;
     -webkit-transform: scale(2) rotate(-5deg);
   }
  67% {
     background-color: green;
     top: 150px;
     -webkit-transform: skew(45deg) rotate(5deg);
   }
  100% {
     background-color: red;
     opacity: 1.0;
     -webkit-transform: scale(1.0) rotate(0deg);
   }
}
.animationSequence {
 	-webkit-animation-name: changingColors;
 	-webkit-animation-duration: 4s;
 	-webkit-animation-direction: alternate;
 	-webkit-animation-timing-function: ease-in-out;
 	width: 400px;
 	top: 250px;
 	right: 150px;
 	position: absolute;
}
    

The final effect is a true frame based animation sequence.

Adding 3D into your CSS

Up to this point you have been playing with 2D animation sequences. An extension to the CSS3 draft is support for 3D. Now, there is a big caveat to using 3D: it only works on Macs and iPhone/iPod Touch (and, presumably, the iPad) devices. With that said, you can do some very cool things with 3D transforms. The following screen shot shows a series of 2D objects being spun in a 3D world using only CSS.

The specification for 3D transformations is still very much in the early stages of development. It is likely to change. You can find out more details here: http://webkit.org/blog/386/3d-transforms/

It can only be a matter of time before the 3D transform technology makes its way on to the PC. It is just too cool.

Will This Really Take Off

At the end of the day you want to use technologies because they are widely adopted. Yes, CSS3 animation effects are much easier to implement then Ajax alternatives, but will your clients see them? Today only people using Google Chrome, Opera Browser and Apple’s Safari will be able to view the animation. The way we access the Web, however, is changing dramatically. More people are moving to mobile devices such as Android phones to view the Web. These new devices do support CSS3 animation.

In addition, HTML5 will include CSS3 as part of its standard. All of the leading Web browser makers are either supporting HTML5 or will support it. Even Microsoft who is claiming dramatically increased support for CSS3 in IE9.

At the end of the day, the implementation of CSS transitions, transforms and animation is inevitable. Now is a great time to get your hands dirty and play with the technology.

Read more from Matthew David.