CSS Tutorial - CSS3 Animation








We can use CSS animations to animate transitions from one CSS style configuration to another.

Animations consist of three parts:

  • a style describing the CSS animation
  • a set of keyframes that indicate the start and end states of the animation's style
  • possible intermediate waypoints along the way.




Configuring the animation

To create a CSS animation sequence, we style the element with the animation shorthand property or other animation related properties.

We can configure the timing and duration of the animation, as well as other details of how the animation sequence should progress.

The actual appearance of the animation is done using the @keyframes at-rule.

The following table lists the @keyframes rule and all the animation properties:

  • @keyframes - config the animation
  • animation - A shorthand property to set all the animation properties, except the animation-play-state and the animation-fill-mode property
  • animation-delay - set when the animation will start
  • animation-direction - set whether or not the animation should play in reverse on alternate cycles
  • animation-duration - set how many seconds or milliseconds an animation takes to complete one cycle
  • animation-fill-mode - set which styles to use when the animation is finished or in a delay
  • animation-iteration-count - set the number of times an animation should play
  • animation-name - set the name of the @keyframes animation
  • animation-play-state - set whether the animation is running or paused
  • animation-timing-function - set the speed curve of the animation




Example

This example shows how to use CSS animations to make H1 elements move across the page.

<!--   w  w  w  . j  a va 2  s  . co m-->
<!doctype html>
<html>
<head>
  <style type="text/css">
    h1 {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
    }
    
    @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      to {
        margin-left:0%;
        width:100%;
      }
    }
    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }
  </style>
</head>
<body>
  <h1>Watch me move</h1>
</body>
</html>

Click to view the demo

Example 2

This example shows how to use CSS animations to make H1 elements move across the page and enlarge text size as it goes.

<!doctype html>
<html>
<head>
  <title>CSS animations: Example 2</title>
  <style type="text/css">
    h1 {<!--  www .  j  ava2  s .co m-->
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
    }
    
    @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }
    
    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }

  </style>
</head>
<body>
  <h1>Watch me move</h1>
 
</body>
</html>

Click to view the demo

Making animation repeat

To make the animation repeat itself, use the animation-iteration-count property to indicate how many times to repeat the animation.

The following code uses infinite to have the animation repeat indefinitely: 


<!--from  w  w w.  j  a  v a2 s.c o  m-->
<!doctype html>
<html>
<head>
  <title>CSS animations: Example 3</title>
  <style type="text/css">
    h1 {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
    
    @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }
    
    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }

  </style>
</head>
<body>
  <h1>Watch me move</h1>
</body>
</html>

The code above is rendered as follows:

Move back and forth

To move back and forth across the screen, we can set animation-direction to alternate. 


<!-- w  w w.java2s  .c  om-->
<!doctype html>
<html>
<head>
  <title>CSS animations: Example 4</title>
  <style type="text/css">
    h1 {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-direction: alternate;
      -webkit-animation-direction: alternate;
    }
    
    @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }
    
    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }

  </style>
</head>
<body>
  <h1>Watch me move</h1>
</body>
</html>

The code above is rendered as follows:

Property Description CSS
animation-delay Set when the animation will start3
animation-direction play animation in reverse on alternate cycles3
animation-duration Set duration in seconds or milliseconds for an animation in one cycle3
animation-fill-mode Set what values to use by the animation is not playing3
animation-iteration-count Set the number of times to play an animation3
animation-name Set a name for the @keyframes animation3
animation-play-state Run or pause the animation3
animation-timing-function Set the speed curve of the animation3
animation Shorthand property for all the animation properties3
@keyframes Create key frame for animation3