Previous chapter (CSS3 Effects - Transitions)Next chapter (CSS3 Effects - Font face)

CSS Animation Loop

This allows us to animated the element movement infinitly.

Other examples in Animations (CSS3 Effects)

Result from the Online TryIt-Editor

<!doctype html>
<html>
  <head>
    <title>HtmlNest.com live html example</title>
    <style type="text/css">
      .infinity
      {
        width:150px;
        height:150px;
        background:#F60;
        position:relative;
        animation:move 2s;
        -moz-animation:move 2s infinite;
         -webkit-animation:move 2s infinite;
       }
      
      @keyframes move
      {
        
        0%   {
          background:#030;
          left:25%;
          top:25%;
        }
        10% {
          background:#C00;
          left:50%;
          top:25%;
        }
        20% {
          background:#FC0;
          left:75%;
          top:200px;
        }
        30% {
          background:#639;
          left:75%;
          top:75%;
        }
        40% {
          background:#F09;
          left:50%;
          top:100%;
        }
        50% {
          background:#F00;
          left:25%;
          top:100%;
        }
        65% {
          background:#309;
          left:0%;
          top:75%;
        }
        80% {
          background:#90C;
          left:0px;
          top:50%;
        }
        100% {
          background:#69F;
          left:25%;
          top:25%;
        }
      }
      
      @-moz-keyframes move /* Firefox */
      {
        0%   {
          background:#030;
          left:25%;
          top:25%;
        }
        10% {
          background:#C00;
          left:50%;
          top:25%;
        }
        20% {
          background:#FC0;
          left:75%;
          top:200px;
        }
        30% {
          background:#639;
          left:75%;
          top:75%;
        }
        40% {
          background:#F09;
          left:50%;
          top:100%;
        }
        50% {
          background:#F00;
          left:25%;
          top:100%;
        }
        65% {
          background:#309;
          left:0%;
          top:75%;
        }
        80% {
          background:#90C;
          left:0px;
          top:50%;
        }
        100% {
          background:#69F;
          left:25%;
          top:25%;
        }
      }
      
      @-webkit-keyframes move /* Safari and Chrome */
      {
        
        0%   {
          background:#030;
          left:25%;
          top:25%;
        }
        10% {
          background:#C00;
          left:50%;
          top:25%;
        }
        20% {
          background:#FC0;
          left:75%;
          top:200px;
        }
        30% {
          background:#639;
          left:75%;
          top:75%;
        }
        40% {
          background:#F09;
          left:50%;
          top:100%;
        }
        50% {
          background:#F00;
          left:25%;
          top:100%;
        }
        65% {
          background:#309;
          left:0%;
          top:75%;
        }
        80% {
          background:#90C;
          left:0px;
          top:50%;
        }
        100% {
          background:#69F;
          left:25%;
          top:25%;
        }
      }
    </style>
    
  </head>
  
  <body>
    <p>
      This animation moves in Iterative manner(infinitly).
    </p>
    
    <div class="infinity">
    </div>
    
  </body>
</html>

^1.0

^4.0

^5.0

^10.0

^12.0

CSS Animation Loop

Useful Information