TryIt Editor v2.0

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @-webkit-keyframes background {
        0% {
          top: 0;
          left: 0;
          background: #5bd97d;
        }
        40% {
          top: 100px;
          left: 50px;
          background: pink;
        }
        100% {
          top: 50px;
          left: 50px;
          background: purple;
        }
      }
      @-moz-keyframes background {
        0% {
          top: 0;
          left: 0;
          background: #5bd97d;
        }
        40% {
          top: 100px;
          left: 150px;
          background: pink;
        }
        100% {
          top: 50px;
          left: 50px;
          background: purple;
        }
      }
      @keyframes background {
        0% {
          top: 0;
          left: 0;
          background: #5bd97d;
        }
        40% {
          top: 100px;
          left: 150px;
          background: pink;
        }
        100% {
          top: 50px;
          left: 100px;
          background: purple;
        }
      }
      .animation {
        height: 100px;
        width: 100px;
        position: relative;
        -webkit-animation: background 5s infinite;
        -moz-animation: background 5s infinite;
        animation: background 5s infinite;
        animation-fill-mode: none;
      }
    </style>
  </head>
  <body>
    <div class="animation"></div>
  </body>
</html>