experiment.html

<html>
  <head>
    <style>
      body {
        padding: 0;
        background-color: #fff;
      }
      #clouds {
        background-color: #11a4ff;
        position: relative;
        margin: 0 auto;
        margin-top: 25%;
        height: 25%;
        width: 25%;
        border-radius: 10px;
      }
      #clouds_1, #clouds_2, #clouds_3 {
        position: absolute;
        width: 100%;
        height: 100%;
        background-position: bottom;
        background-repeat: repeat-x;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      
      @-webkit-keyframes slider500 {
        from {
          background-position: 0 100%;
        }
        to {
          background-position: -500px 100%;
        }
      }

      @-webkit-keyframes slider300 {
        from {
          background-position: 0 100%;
        }
        to {
          background-position: -300px 100%;
        }
      }

      @-webkit-keyframes slider100 {
        from {
          background-position: 0 100%;
        }
        to {
          background-position: -100px 100%;
        }
      }
      
      #clouds_1 {
        background-image: url(clouds-100.png);
        -webkit-animation-name: slider100;
        -webkit-animation-duration: 40s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
      }
      #clouds_2 {
        background-image: url(clouds-300.png);
        -webkit-animation-name: slider300;
        -webkit-animation-duration: 40s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
      }
      #clouds_3 {
        background-image: url(clouds-500.png);
        -webkit-animation-name: slider500;
        -webkit-animation-duration: 20s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
      }
      #content {
        padding: 0 20%;
      }
      h1 {
        text-align: center;
      }
      h1 a {
        font-family: Helvetica;
        text-align: center;
        color: rgba(0,0,0,.2);
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div id="clouds">
      <div id="clouds_1">
        &nbsp;
      </div>
      <div id="clouds_2">
        &nbsp;
      </div>
      <div id="clouds_3">
        &nbsp;
      </div>
    </div>
    <div id="content">
      <h1><a href="http://onemorecloud.com/">one more cloud</a></h1>
    </div>
  </body>
</html>