A Simple Scene Animated with CSS3

#sun.animate {
  animation-name: sunrise;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-iteration-count: 1; 
  animation-direction: normal;
  animation-delay: 0s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

@keyframes sunrise {

  0% {
    bottom: 0;
    left: 340px;
    background: #f00;
  }
  
  33% {
    bottom: 340px;
    left: 340px;
    background: #ffd630;
  }

  66% {
    bottom: 340px;
    left: 40px;
    background: #ffd630;
  }

  100% {
    bottom: 0;
    left: 40px;
    background: #f00;
  }

}

#sky.animate {
  animation-name: sky;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-iteration-count: 1; 
  animation-direction: normal;
  animation-delay: 0s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

@keyframes sky {

  0% {
    background-color: #525252;
  }
  
  33% {
    background-color: #6293e5;
  }

  66% {
    background-color: #6293e5;
  }

  100% {
    background-color: #525252;
  }

}

#ground.animate {
  animation-name: ground;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-iteration-count: 1; 
  animation-direction: normal;
  animation-delay: 0s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

@keyframes ground {

  0% {
    background: #6c5228;
  }
  
  33% {
    background: #48a037;
  }

  66% {
    background: #48a037;
  }

  100% {
    background: #6c5228;
  }

}

#cloud.animate {
  animation-name: cloud;
  animation-duration: 12s;
  animation-timing-function: ease;
  animation-iteration-count: 1; 
  animation-direction: normal;
  animation-delay: 0s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

@keyframes cloud {

  0% {
    opacity: 0;
    left: -100px;
  }
  
  50% {
    opacity: 1;
  }
  
  75% {
    opacity: 1;
    left: 100px;
  }
  
  100% {
    opacity: 0;
    left: 500px;
  }

}

#moon.animate {
  animation-name: moon;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-delay: 0s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

@keyframes moon {

  0% {
    opacity: 0;
    left: -100px;
  }
  
  50% {
    opacity: 0;
    left: -100px;
  }
  
  90% {
    opacity: 0;
    left: -100px;
  }
  
  100% {
    opacity: 1;
    left: 50px;
  }

}