CSS3.com - A comprehensive CSS 3 reference guide, tutorial, and blog

• Tweet
• Share

• Tweet
• Share

Hello World! So after the last tutorial on styling our menu, we are going to look into animations involving CSS3. We are going to be applying the webkit animation properties to text elements inside of a specific div tag, but you can truly do this with any dom element on the page.

This is what we are going to be making today:

Still interested? Great! That is what I was hoping to view. With CSS3 we can create animations to replace animated gifs, Flash animations, and JS features. If you aren’t interested well scroll to the bottom and check out the source for yourself.

To create animations in CSS3, you will have to learn about the @keyframes rule. The @keyframes rule is where the animation is created. This is very similar to Flash. You will specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

Internet Explorer and Opera do not yet support the @keyframes rule or the animation property. Firefox requires the prefix -moz-, while Chrome and Safari require the prefix -webkit-.

This is the CSS we will be using.

< style>
@-webkit-keyframes pulse {
  from {
    opacity: 0.0;
    font-size: 100%;
  }
  to {
    opacity: 1.0;
    font-size: 150%;
  }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 3s;
}​
< /style>

It seems simple enough because it truly is. CSS3 makes leaps and bounds to make your life easier. It reduces load time and the need for external libraries to make the UX better. The HTML / JS for this page is as follows

 < div id="content">
    < p id="log">
    < script>
      document.getElementById('content').innerHTML = 'animated content';
    < /script>

Now everything together into one file would be:

< !DOCTYPE html>
< html>
  < head>
  < style>
    @-webkit-keyframes pulse {
      from {
        opacity: 0.0;
        font-size: 100%;
      }
      to {
        opacity: 1.0;
        font-size: 150%;
      }
    }
    
    div {
      -webkit-animation-name: pulse;
      -webkit-animation-duration: 3s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-direction: alternate;
    }
  < /style>
  < /head>
  < body>
    < div id="content">
    < p id="log">
    < script>
      document.getElementById('content').innerHTML = 'animated content';
    < /script>
  < /body>
< /html>

If you were to do this for Firefox, you would change the CSS to:

 < style>
    @-moz-keyframes pulse {
      from {
        opacity: 0.0;
        font-size: 100%;
      }
      to {
        opacity: 1.0;
        font-size: 150%;
      }
    }
    
    div {
      -moz-animation-name: pulse;
      -moz-animation-duration: 3s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: ease-in-out;
      -moz-animation-direction: alternate;
    }
  < / style>

Following these simple methods can create a nice transition period in dom elements.