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

CSS Animation Move

This allows us to move the animated element to move from one place to another.

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">
      .movement
      {
        width:150px;
        height:150px;
        background:#F60;
        position:relative;
        animation:move 5s;
        -moz-animation:move 5s;
        -webkit-animation:move 5s;
      }
      
      @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:0%;
          top:50%;
        }
        100% {
          background:#69F;
          left:0%;
          top:25%;
        }
      }
      
      @-moz-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:0%;
          top:50%;
        }
        100% {
          background:#69F;
          left:0%;
          top:25%;
        }
      }
      
      @-webkit-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:0%;
          top:50%;
        }
        100% {
          background:#69F;
          left:0%;
          top:25%;
        }
      }
    </style>
    
  </head>
  
  <body>
    <h3>
      CSS Animation - Move
    </h3>
    
    <div class="movement">
    </div>
    
  </body>
</html>

^1.0

^4.0

^5.0

^10.0

^12.0

CSS Animation Move

Useful Information