Day 2: HTML5 Animation using CSS3

There are two ways to animate using CSS3. Transitions used with transforms and animations. The major difference is that transitions and transforms can occur on a state such as roll over and animations can run as soon as the css is loaded.

Both of these methods rely on layout or rendering engines such as WebKit. Webkit is an open source layout engine designed to allow web browsers render web pages. It powers Safari and Chrome. There are others for Opera and Firefox. Currently only IE 10 beta provides support for transitions and transforms. In this demonstration we will include all of the prefixes.

You can download the source files for this tutorial here

Lets start with Transitions and Transforms. This is a great way move things inside your layout or do a simple animation based of user interactivity.

Lets start with something simple like making a couple of arrows rotate when we roll over them. You can see the sample here

HTML

  1.  <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>CSS3 Transform:Translate basics</title>
  5. <link href="css/style.css" rel="stylesheet" type="text/css" />
  6. </head>
  7.  
  8. <body>
  9. <div id="axis" class="one">
  10.  <img class="object arrow1 rotate360" src="images/arrow.png"/>
  11. </div>
  12.  
  13. <div id="axis" class="one">
  14.  <img class="object arrow2 rotate360" src="images/arrow.png"/>
  15. </div>
  16.  
  17.  <div id="caption"><p><span><font color="#FFFFFF">roll over to rotate</font></span></p></div>
  18.  
  19. </body>
  20. </html>

In our HTML markup we need to import our style.css document which I’m doing on Line 5

Inside our body tag we’re going to create a couple of div tags and give them an ID of axis and a class called one. Inside those we’ll create img tags and assign three classes to each image. object, arrow1, arrow2 and rotate360.

The “object” class is a set of rules that we will apply to any object with this class name. We want both arrows to do the same thing, so we give them both the class object. Arrow1 and Arrow2 are different objects so we’ll apply unique classes to them so that we can position them individually. Finally rotate360 is how we’re going to move each object so this is the third class.

We’re going to select the arrows by accessing the div id axis. Anything with this div ID will be subject to the hover and executed in the rotate360 class which will be set up in the CSS.

CSS.

  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4.  
  5. body {
  6.  background:#818181;
  7. }
  8.  
  9. .object {
  10.  position:absolute;
  11.  transition:all 2s ease-in-out;
  12.  -webkit-transition: all 2s ease-in-out;
  13.  -moz-transition: all 2s ease-in-out;
  14.  -o-transition: all 2s ease-in-out;
  15. }
  16.  
  17.  
  18. .arrow1 {
  19.  top: 55%;
  20.  left: 56%;
  21. }
  22.  
  23. #axis:hover .rotate360 {
  24.   transform:rotate(360deg);
  25.  -webkit-transform:rotate(360deg); /** Chrome/Safari **/
  26.  -o-transform:rotate(360deg); /** Opera **/
  27.  -moz-transform:rotate(360deg); /** Mozilla Firefox **/
  28. }
  29.  
  30. .arrow2 {
  31.  top: 55%;
  32.  left: 23%;
  33. }

on Line 18 we’re going to position arrow1 to the left. We’ll position arrow2 to the right on line 30. We’re also going to position our arrows to absolute using the object class. In fact both arrows will adhere to the object class when it comes to position and transition.

Finally on line 23 we define the transform of each rendering engine. Any div with the id axis will be subject to the on hover listener where we’ll call the class .rotate360.

As you can see we access the rendering engines of all the major browsers. -webkit- transform -o- transform and -moz- transform for Safari, Chrome, Opera and Firefox.

There is support for IE coming so you may want to include -ms- prefixes as well.

And that is a simple rotation in a 2D space.

Thats cool but what about 3D Transitions?

3D using CSS is becoming more and more supported in the different browsers. It is as easy as applying a transform and transition. You can see the sample here

3D Transform
HTML

  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>CSS3 Transform:Translate basics</title>
  5. <link href="css/style.css" rel="stylesheet" type="text/css" />
  6. </head>
  7.  
  8. <body>
  9.   <div id="rotate-y" class="container">
  10.     <div class="panel">
  11.     <div class="contents"><img src="images/robot.png" />roll over to rotateY(180 degrees)</div>
  12.     </div>
  13.   </div>
  14.  </body>
  15.  
  16.  
  17. </html>

In the HTML we set up a div to hold the object we want to rotate. we’ll place an ID of rotate-y on it and give it a class name of container.

Inside that div we’re going to make the panel that will be rotated. we give it a class name of panel.

CSS

  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4.  
  5. body {
  6.  background:#818181;
  7.    padding-top: 120px;
  8. }
  9.  
  10. .container {
  11.       width: 600px;
  12.       height: 400px;
  13.       /*border: 1px solid #000;*/
  14.       margin: 0 auto 60px;
  15.       position: relative;
  16.  
  17.       -webkit-perspective: 1200px;
  18.          -moz-perspective: 1200px;
  19.            -o-perspective: 1200px;
  20.               perspective: 1200px;
  21.      
  22.  
  23.     }
  24.  
  25.     .panel {
  26.  width: 100%;
  27.  height: 100%;
  28.  position: absolute;
  29.  margin:auto;
  30.  opacity: 0.7;
  31.  color: white;
  32.  background: #ff0099;
  33.  
  34.  transition:all 2s ease-in-out;
  35.  -webkit-transition: all 2s ease-in-out;
  36.  -moz-transition: all 2s ease-in-out;
  37.  -o-transition: all 2s ease-in-out;
  38.  
  39.     }
  40.  
  41.  .contents {
  42.   position:relative;
  43.   margin:auto;
  44.   width:400px;
  45.   height:200px;
  46.   padding-top:150px;
  47.  
  48.  }
  49.  
  50.  
  51.     #rotate-y:hover .panel {
  52.       -webkit-transform: rotateY( 180deg );
  53.          -moz-transform: rotateY( 180deg );
  54.            -o-transform: rotateY( 180deg );
  55.               transform: rotateY( 180deg );
  56.     }

Just like before we’re going to use transition on the panel itself and put the transform on the hover function

Line 23 we set up the .panel class and put the transitions on it. as you can see the transitions are exactly the same as they were in the arrow movement example.

transition:all 2s ease-in-out;

all – everything inside that object (so the div named content inside panel gets rotated)
2s – the duration. 2 seconds.
ease-in-out – this will apply ease at the beginning and the end of the animation.

Finally on the #rotate-y class we apply the .panel transform when the user hovers the mouse over the panel. The only difference between this and the arrow rotation is rotateY( 180deg );
we’re basically saying that we want a 3D rotation on the Y axis.

Using Animation
The other method of moving animating things in CSS3 is using animation. The major difference between a transition and and an animation is animations are run as soon as the css loads. You can see the sample here

To facilitate the animation simply name it and then set up keyframes.

In this very simple example we’ll simply make a div into a class called square, and use CSS3 animation to change its color when the css loads.

HTML

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>CSS3 Animation: Basics</title>
  6. <link href="css/style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10.   <div class="square"></div>
  11.  </body>
  12.  
  13. </html>

As you can see the HTML is bare minimum. We literally have only a div with a class called square.

CSS

  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4.  
  5. body {
  6.  background:#818181;
  7.    padding-top: 120px;
  8. }
  9.  
  10. .square {
  11.  position:relative;
  12.  left:50%;
  13.  width:100px;
  14.  height:100px;
  15.  background:red;
  16.  animation: simple_animation 10s;
  17.  -moz-animation: simple_animation 10s;
  18.  -webkit-animation:simple_animation 10s;
  19. }
  20.  
  21. @keyframes simple_animation {
  22.  0% {
  23.   background: red;
  24.  }
  25.  
  26.  25% {
  27.   background: yellow;
  28.  }
  29.  
  30.  50% {
  31.   background: blue;
  32.  }
  33.  
  34.  100% {
  35.   background: green;
  36.  }
  37.  
  38. }
  39.  
  40. @-webkit-keyframes simple_animation {
  41.  0% {
  42.   background: red;
  43.  }
  44.  
  45.  25% {
  46.   background: yellow;
  47.  }
  48.  
  49.  50% {
  50.   background: blue;
  51.  }
  52.  
  53.  100% {
  54.   background: green;
  55.  }
  56.  
  57. }
  58.  
  59. @-moz-keyframes simple_animation {
  60.  0% {
  61.   background: red;
  62.  }
  63.  
  64.  25% {
  65.   background: yellow;
  66.  }
  67.  
  68.  50% {
  69.   background: blue;
  70.  }
  71.  
  72.  100% {
  73.   background: green;
  74.  }
  75.  
  76. }

The CSS3 is quite simple. We define the .square class and set the width, height and background color. On Line16 we name the animation “simple_animation” and set a duration.

Below that we’ll set up the @keyframes. Just like transitions, we need to add the prefixes for each browser followed by the name of the animation.

We do this but setting the 0% – 100% catch statements and we change the background of the div for every 25% of the animation. This of course will happen over the course of 2s which we defined in the animation name.

If you run it in your browser you’ll see the 100 pixel square starting on red and changing colors 4 times over 10 seconds before going back to red.

Pretty neat. You can easily see how some very cool effects can be added to your HTML5 projects with decent browser support.

In tomorrow’s Day 3 tutorial I will begin to cover some of the big JavaScript frameworks that are available to do the heavy lifting for interactive animation on your HTML5 site.

Posted on July 5, 2012 at 8:06 pm by Runtime · Permalink
In: CSS, HTML5, animation · Tagged with: ,

Leave a Reply

You must be logged in to post a comment.