/**********************************************************************
 * 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 ] 
 * 
 * 
 *  
 ***********************************************************************/


/****************** grass1 - the front grass *****************/
#grass1 {
   position:absolute;
   top:750px;
   left:20px;
   height:10px;
   z-index:8;
   -webkit-animation-name: grass_grow;
   -webkit-animation-duration: 250s;
   -webkit-animation-timing-function: ease-in;
   -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: grass_grow;
   animation-duration: 250s;
   animation-timing-function: ease-in;
   animation-iteration-count: infinite;	
   animation-direction: normal;
   animation-delay: 0;
   animation-play-state: running;
   animation-fill-mode: forwards;
   
  
   -moz-animation-name: grass_grow;
   -moz-animation-duration: 250s;
   -moz-animation-timing-function: ease-in;
   -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: grass_grow;
   -o-animation-duration: 250s;
   -o-animation-timing-function: ease-in;
   -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: grass_grow;
   -ms-animation-duration: 250s;
   -ms-animation-timing-function: ease-in;
   -ms-animation-iteration-count: infinite;	
   -ms-animation-direction: normal;
   -ms-animation-delay: 0;
   -ms-animation-play-state: running;
   -ms-animation-fill-mode: forwards;
}

/****************** grass2 - the back grass *****************/
#grass2 {
   position:absolute;
   top:620px;
   left:20px;
   height:20px;
   z-index:1;
   -webkit-animation-name: grass_grow;
   -webkit-animation-duration: 180s;
   -webkit-animation-timing-function: ease-in;
   -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: grass_grow;
   animation-duration: 180s;
   animation-timing-function: ease-in;
   animation-iteration-count: infinite;	
   animation-direction: normal;
   animation-delay: 0;
   animation-play-state: running;
   animation-fill-mode: forwards;
   
  
   -moz-animation-name: grass_grow;
   -moz-animation-duration: 180s;
   -moz-animation-timing-function: ease-in;
   -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: grass_grow;
   -o-animation-duration: 180s;
   -o-animation-timing-function: ease-in;
   -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: grass_grow;
   -ms-animation-duration: 180s;
   -ms-animation-timing-function: ease-in;
   -ms-animation-iteration-count: infinite;	
   -ms-animation-direction: normal;
   -ms-animation-delay: 0;
   -ms-animation-play-state: running;
   -ms-animation-fill-mode: forwards;
}
 
@-webkit-keyframes grass_grow {
  0% {
    left:200px;
    top:600px;
    width: 800px;
    height: 5px;
  }
  
  90% {
    left: 20px;
    top:500px;
    width: 800px;
	height: 190px;
	 opacity:1;
    filter:alpha(opacity=100); 
  }
  
  100% {
    left: 200px;
    top:415px;
    width: 800px;
	height: 190px;
	 opacity:0;
    filter:alpha(opacity=0); 
  }
  
  
  
}

@keyframes grass_grow {
  0% {
    left: 200px;
    top:598px;
    width: 800px;
    height: 5px;
  }
  
  90% {
    left: 200px;
    top:415px;
    width: 800px;
	height: 190px;
	 opacity:1;
    filter:alpha(opacity=100); 
  }
  
  100% {
    left: 200px;
    top:415px;
    width: 800px;
	height: 190px;
	 opacity:0;
    filter:alpha(opacity=0); 
  }
  
  
  
}

@-moz-keyframes grass_grow {
  0% {
    left: 200px;
    top:598px;
    width: 700px;
    height: 5px;
  }
  
  90% {
    left: 200px;
    top:415px;
    width:700px;
	height: 190px;
	 opacity:1;
    filter:alpha(opacity=100); 
  }
  
  100% {
    left: 200px;
    top:415px;
    width: 700px;
	height: 190px;
	 opacity:0;
    filter:alpha(opacity=0); 
  }
  
  
  
}

@-o-keyframes grass_grow {
  0% {
    left: 200px;
    top:598px;
    width: 700px;
    height: 5px;
  }
  
  90% {
    left: 150px;
    top:415px;
    width: 700px;
	height: 190px;
	 opacity:1;
    filter:alpha(opacity=100); 
  }
  
  100% {
    left: 150px;
    top:415px;
    width: 700px;
	height: 190px;
	 opacity:0;
    filter:alpha(opacity=0); 
  }
  
  
  
}

@-ms-keyframes grass_grow {
  0% {
    left: 150px;
    top:598px;
    width: 700px;
    height: 5px;
  }
  
 90% {
    left: 150px;
    top:415px;
    width: 700px;
	height: 190px;
	 opacity:1;
    filter:alpha(opacity=100); 
  }
  
  100% {
    left: 150px;
    top:415px;
    width: 700px;
	height: 190px;
	 opacity:0;
    filter:alpha(opacity=0); 
  }
  
  
}