/**********************************************************************
 * Open source codes from Mark Qian
 *
 * You can get more at
 * 
 * http://www.markqian.com
 * 
 * Licensed under the MIT and GPL terms
 * To use it on other terms please contact us
 *
 * Copyright(c) 2013 Mark Qian [ markqian@hotmail.com ] 
 * 
 * 
 *  
 ***********************************************************************/

#bird1 {
   position:absolute;
   top:50px;
   left:-100px;
   z-index:1;
   -webkit-animation-name: bird_fly;
   -webkit-animation-duration: 75s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;	
   -webkit-animation-direction: normal;
   -webkit-animation-delay: 0;
   -webkit-animation-play-state: running;
   -webkit-animation-fill-mode: forwards;
   
    animation-name: bird_fly;
   animation-duration: 75s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;	
   animation-direction: normal;
   animation-delay: 0;
   animation-play-state: running;
   animation-fill-mode: forwards;
   
  
   -moz-animation-name: bird_fly;
   -moz-animation-duration: 75s;
   -moz-animation-timing-function: linear;
   -moz-animation-iteration-count: infinite;	
   -moz-animation-direction: normal;
   -moz-animation-delay: 0;
   -moz-animation-play-state: running;
   -moz-animation-fill-mode: forwards;
   
   -o-animation-name: bird_fly;
   -o-animation-duration: 75s;
   -o-animation-timing-function: linear;
   -o-animation-iteration-count: infinite;	
   -o-animation-direction: normal;
   -o-animation-delay: 0;
   -o-animation-play-state: running;
   -o-animation-fill-mode: forwards;
   
   -ms-animation-name: bird_fly;
   -ms-animation-duration: 75s;
   -ms-animation-timing-function: linear;
   -ms-animation-iteration-count: infinite;	
   -ms-animation-direction: normal;
   -ms-animation-delay: 0;
   -ms-animation-play-state: running;
   -ms-animation-fill-mode: forwards;
}

#bird2 {
   position:absolute;
   top:180px;
   left:-100px;
   z-index:2;
   -webkit-animation-name: bird_fly;
   -webkit-animation-duration: 65s;
   -webkit-animation-timing-function: ease-in;
   -webkit-animation-iteration-count: infinite;	
   -webkit-animation-direction: normal;
   -webkit-animation-delay: 2;
   -webkit-animation-play-state: running;
   -webkit-animation-fill-mode: forwards;
   
    animation-name: bird_fly;
   animation-duration: 65s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;	
   animation-direction: normal;
   animation-delay: 2;
   animation-play-state: running;
   animation-fill-mode: forwards;
   
  
   -moz-animation-name: bird_fly;
   -moz-animation-duration: 65s;
   -moz-animation-timing-function: linear;
   -moz-animation-iteration-count: infinite;	
   -moz-animation-direction: normal;
   -moz-animation-delay: 2;
   -moz-animation-play-state: running;
   -moz-animation-fill-mode: forwards;
   
   -o-animation-name: bird_fly;
   -o-animation-duration: 65s;
   -o-animation-timing-function: linear;
   -o-animation-iteration-count: infinite;	
   -o-animation-direction: normal;
   -o-animation-delay: 2;
   -o-animation-play-state: running;
   -o-animation-fill-mode: forwards;
   
   -ms-animation-name: bird_fly;
   -ms-animation-duration: 65s;
   -ms-animation-timing-function: linear;
   -ms-animation-iteration-count: infinite;	
   -ms-animation-direction: normal;
   -ms-animation-delay: 2;
   -ms-animation-play-state: running;
   -ms-animation-fill-mode: forwards;
}

#bird3 {
   position:absolute;
   top:130px;
   left:-150px;
   z-index:6;
   -webkit-animation-name: bird_fly;
   -webkit-animation-duration: 60s;
   -webkit-animation-timing-function: ease-out;
   -webkit-animation-iteration-count: infinite;	
   -webkit-animation-direction: normal;
   -webkit-animation-delay: 1;
   -webkit-animation-play-state: running;
   -webkit-animation-fill-mode: forwards;
   
    animation-name: bird_fly;
   animation-duration: 60s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;	
   animation-direction: normal;
   animation-delay: 1;
   animation-play-state: running;
   animation-fill-mode: forwards;
   
  
   -moz-animation-name: bird_fly;
   -moz-animation-duration: 60s;
   -moz-animation-timing-function: linear;
   -moz-animation-iteration-count: infinite;	
   -moz-animation-direction: normal;
   -moz-animation-delay: 1;
   -moz-animation-play-state: running;
   -moz-animation-fill-mode: forwards;
   
   -o-animation-name: bird_fly;
   -o-animation-duration: 60s;
   -o-animation-timing-function: linear;
   -o-animation-iteration-count: infinite;	
   -o-animation-direction: normal;
   -o-animation-delay: 1;
   -o-animation-play-state: running;
   -o-animation-fill-mode: forwards;
   
   -ms-animation-name: bird_fly;
   -ms-animation-duration: 60s;
   -ms-animation-timing-function: linear;
   -ms-animation-iteration-count: infinite;	
   -ms-animation-direction: normal;
   -ms-animation-delay: 1;
   -ms-animation-play-state: running;
   -ms-animation-fill-mode: forwards;
}


@-webkit-keyframes bird_fly {
  0% {
    left: -50px;
    width: 35px;
    height: 25px;
  }
  25% {
    left: 400px;
    width: 65px;
    height: 55px;
  }
  50% {
    left: 800px;
    width: 75px;
    height: 65px;
  }
  75% {
    left: 1300px;
    width: 75px;
    height: 65px;
  }
  100% {
    left: 2200px;
    width: 25px;
    height: 15px;
  }
}

@keyframes bird_fly {
  0% {
    left: -50px;
    width: 35px;
    height: 25px;
  }
  25% {
    left: 400px;
    width: 65px;
    height: 55px;
  }
  50% {
    left: 800px;
    width: 75px;
    height: 65px;
  }
  75% {
    left: 1300px;
    width: 75px;
    height: 65px;
  }
  100% {
    left: 2200px;
    width: 25px;
    height: 15px;
  }
}

@-moz-keyframes bird_fly {
 0% {
    left: -50px;
    width: 35px;
    height: 25px;
  }
  25% {
    left: 400px;
    width: 65px;
    height: 55px;
  }
  50% {
    left: 800px;
    width: 75px;
    height: 65px;
  }
  75% {
    left: 1300px;
    width: 75px;
    height: 65px;
  }
  100% {
    left: 2200px;
    width: 25px;
    height: 15px;
  }
}

@-o-keyframes bird_fly {
 0% {
    left: -50px;
    width: 35px;
    height: 25px;
  }
  25% {
    left: 400px;
    width: 65px;
    height: 55px;
  }
  50% {
    left: 800px;
    width: 75px;
    height: 65px;
  }
  75% {
    left: 1300px;
    width: 75px;
    height: 65px;
  }
  100% {
    left: 2200px;
    width: 25px;
    height: 15px;
  }
}

@-ms-keyframes bird_fly {
  0% {
    left: -50px;
    width: 35px;
    height: 25px;
  }
  25% {
    left: 400px;
    width: 65px;
    height: 55px;
  }
  50% {
    left: 800px;
    width: 75px;
    height: 65px;
  }
  75% {
    left: 1300px;
    width: 75px;
    height: 65px;
  }
  100% {
    left: 2200px;
    width: 25px;
    height: 15px;
  }
}