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

#tree1 {
   position:absolute;
   top:600px;
   left:-300px;
   z-index:3;
   -webkit-animation-name: tree_grow;
   -webkit-animation-duration: 100s;
   -webkit-animation-timing-function: ease-in;
   -webkit-animation-iteration-count: 1;	
   -webkit-animation-direction: normal;
   -webkit-animation-delay: 0;
   -webkit-animation-play-state: running;
   -webkit-animation-fill-mode: forwards;
   
    animation-name: tree_grow;
   animation-duration: 100s;
   animation-timing-function: ease-in;
   animation-iteration-count: 1;	
   animation-direction: normal;
   animation-delay: 0;
   animation-play-state: running;
   animation-fill-mode: forwards;
   
  
   -moz-animation-name: tree_grow;
   -moz-animation-duration: 100s;
   -moz-animation-timing-function: ease-in;
   -moz-animation-iteration-count: 1;	
   -moz-animation-direction: normal;
   -moz-animation-delay: 0;
   -moz-animation-play-state: running;
   -moz-animation-fill-mode: forwards;
   
   -o-animation-name: tree_grow;
   -o-animation-duration: 100s;
   -o-animation-timing-function: ease-in;
   -o-animation-iteration-count: 1;	
   -o-animation-direction: normal;
   -o-animation-delay: 0;
   -o-animation-play-state: running;
   -o-animation-fill-mode: forwards;
   
   -ms-animation-name: tree_grow;
   -ms-animation-duration: 100s;
   -ms-animation-timing-function: ease-in;
   -ms-animation-iteration-count: 1;	
   -ms-animation-direction: normal;
   -ms-animation-delay: 0;
   -ms-animation-play-state: running;
   -ms-animation-fill-mode: forwards;
}


@-webkit-keyframes tree_grow {
  0% {
    left: 550px;
    top:600px;
    width: 50px;
    height: 100px;
    visibility:hidden;
  }
  3% {
    left: 550px;
    top:231px;
    width: 50px;
    height: 100px;
  	visibility:hidden;
  }
  4% {
    left: 500px;
    top:300px;
    width: 50px;
    height: 100px;
  	visibility:visible;
  }
  7% {
    left: 457px;
    top:200px;
    width: 100px;
    height: 200px;
    visibility:visible;
  }
  10% {
    left: 420px;
    top:200px;
    width: 200px;
    height: 200px;
    visibility:visible;
  }
  15% {
    left: 390px;
    top:100px;
    width: 500;
    height: 303px;
    visibility:visible;
  }
  18% {
    left: 350px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  100% {
    left: 350px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  
  
}

@keyframes tree_grow {
   0% {
    left: 550px;
    top:200px;
    width: 50px;
    height: 100px;
    visibility:hidden;
  }
  3% {
    left: 550px;
    top:231px;
    width: 50px;
    height: 100px;
  	visibility:hidden;
  }
  4% {
    left: 500px;
    top:303px;
    width: 50px;
    height: 100px;
  	visibility:visible;
  }
  7% {
    left: 457px;
    top:200px;
    width: 100px;
    height: 200px;
    visibility:visible;
  }
  10% {
    left: 420px;
    top:200px;
    width: 200px;
    height: 200px;
    visibility:visible;
  }
  15% {
    left: 390px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  18% {
    left: 350px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  100% {
    left: 350px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  
  
}

@-moz-keyframes tree_grow {
   0% {
    left: 550px;
    top:600px;
    width: 50px;
    height: 100px;
    visibility:hidden;
  }
  3% {
    left: 550px;
    top:231px;
    width: 50px;
    height: 100px;
  	visibility:hidden;
  }
  4% {
    left: 500px;
    top:303px;
    width: 50px;
    height: 100px;
  	visibility:visible;
  }
  7% {
    left: 457px;
    top:200px;
    width: 100px;
    height: 200px;
    visibility:visible;
  }
  10% {
    left: 420px;
    top:200px;
    width: 200px;
    height: 200px;
    visibility:visible;
  }
  15% {
    left: 390px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  18% {
    left: 350px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  100% {
    left: 350px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  
}

@-o-keyframes tree_grow {
   0% {
    left: 550px;
    top:200px;
    width: 50px;
    height: 100px;
    visibility:hidden;
  }
  3% {
    left: 550px;
    top:231px;
    width: 50px;
    height: 100px;
  	visibility:hidden;
  }
  4% {
    left: 500px;
    top:303px;
    width: 50px;
    height: 100px;
  	visibility:visible;
  }
  7% {
    left: 457px;
    top:200px;
    width: 100px;
    height: 200px;
    visibility:visible;
  }
  10% {
    left: 420px;
    top:200px;
    width: 200px;
    height: 200px;
    visibility:visible;
  }
  15% {
    left: 390px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  18% {
    left: 350px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  100% {
    left: 350px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  
  
}

@-ms-keyframes tree_grow {
   0% {
    left: 550px;
    top:200px;
    width: 50px;
    height: 100px;
    visibility:hidden;
  }
  3% {
    left: 550px;
    top:231px;
    width: 50px;
    height: 100px;
  	visibility:hidden;
  }
  4% {
    left: 500px;
    top:303px;
    width: 50px;
    height: 100px;
  	visibility:visible;
  }
  7% {
    left: 457px;
    top:200px;
    width: 100px;
    height: 200px;
    visibility:visible;
  }
  10% {
    left: 420px;
    top:200px;
    width: 200px;
    height: 200px;
    visibility:visible;
  }
  15% {
    left: 390px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  18% {
    left: 350px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  100% {
    left: 350px;
    top:100px;
    width: 500px;
    height: 303px;
    visibility:visible;
  }
  
}