Clouds going past Eiffel Tower

 
 

 

CSS Animations

HTML

<div class="sky">
    <div class="cloud fcloud01"></div>
    <div class="cloud fcloud02"></div>
</div>

 

CSS

/* cloud drift information */
.sky {
  width:100%;
  height:500px;
  background: transparent url(http://www.roguesurfer.com/sites/default/files/sandbox/sky.jpg) top left no-repeat;
  background-size: 100% 100%;
  margin:auto;
  position:relative;
}
    
.cloud {
  width: 250px;
  height:200px;
  position:absolute;
  background:transparent url(http://www.roguesurfer.com/sites/default/files/sandbox/front_cloud.png) 0 0 no-repeat;
}
    
.fcloud01 {
  top:50px;
  z-index:100;        
  /* animation syntax shorthand order: name duration timing-function delay iteration-count direction fill-mode */
  -webkit-animation: drift 25s linear infinite;
  -moz-animation: drift 25s linear infinite;
  -o-animation: drift 25s linear infinite;
  animation: drift 25s linear infinite;
}
            
.fcloud02 {
  top:190px;
  z-index: 200;                
  -webkit-animation: drift 35s linear 10s infinite backwards;
  -moz-animation: drift 35s linear 10s infinite backwards;
  -o-animation: drift 35s linear 10s infinite backwards;
  animation: drift 35s linear 10s infinite backwards;
}


@-webkit-keyframes drift {
  from {-webkit-transform:translateX(-625px);}        
  to {-webkit-transform:translateX(1600px);}
}
    
@-moz-keyframes drift {
  from {-moz-transform:translateX(-625px);}        
  to {-moz-transform:translateX(1600px);}
}
    
@-o-keyframes drift {
  from {-o-transform:translateX(-625px);}        
  to {-o-transform:translateX(1600px);}
}
    
@-keyframes drift {
  from {transform:translateX(-625px);}        
  to {transform:translateX(1600px);}
}