animations css3

animation.css

/*
http://www.w3schools.com/cssref/css3_pr_keyframes.asp
*/



.ornament {
  -webkit-animation:tilting 4s infinite; /* Safari and Chrome */
  -webkit-animation-timing-function:ease-in-out;
  -webkit-transform: rotate(-45deg);
  -moz-animation:tilting 4s infinite; /* Safari and Chrome */
  -moz-animation-timing-function:ease-in-out;
  -moz-transform: rotate(-45deg);
}

.waving {
  -webkit-animation:sliding 4s infinite;
  -webkit-animation-timing-function:ease-in-out;
  -moz-animation:sliding 4s infinite;
  -moz-animation-timing-function:ease-in-out;
}


#object_holly {
	position: absolute;
	top: 320px; /* Adjust accordingly */
	left: 399px; /* Adjust accordingly */
  -webkit-animation:scaling 3s infinite; /* Safari and Chrome */
  -webkit-animation-timing-function:ease-in-out;
  -webkit-transform: scale(0.9);
  -moz-animation:scaling 3s infinite; /* Safari and Chrome */
  -moz-animation-timing-function:ease-in-out;
  -moz-transform: scale(0.9);
}



#object_reindeer {
	position: absolute;
	top: 174px; /* Adjust accordingly */
	left: 176px; /* Adjust accordingly */
	-webkit-animation-name:             rotate; 
  -moz-animation-name:             rotatemoz; 
	-webkit-animation-duration:         1.5s; 
	-moz-animation-duration:         1.5s; 
	-webkit-animation-iteration-count:  infinite;
	-moz-animation-iteration-count:  infinite;
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
}

#main_heading {
	position: absolute;
	top: -10px;
	left: 5%;
	color: #fff;
	-webkit-animation-name:             rotate2; 
-moz-animation-name:             rotatemoz2; 
        -webkit-animation-duration:         2.5s; 
-moz-animation-duration:         2.5s; 
        -webkit-animation-iteration-count:  infinite;
-moz-animation-iteration-count:  infinite;
        -webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
}

.nieve {
	position: absolute;
	top: 208px; /* Adjust accordingly */
	left: 335px; /* Adjust accordingly */
	        -webkit-animation-name:             rotate; 
-moz-animation-name:             rotatemoz; 
        -webkit-animation-duration:         1.75s; 
-moz-animation-duration:         1.75s; 
        -webkit-animation-iteration-count:  infinite;
-moz-animation-iteration-count:  infinite;
        -webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;

}

@-webkit-keyframes rotate {
      0% {
        -webkit-transform: rotate(0deg) translateX(0px);
      }
	    30%{
	    	-webkit-transform: rotate(45deg) translateX(45px);
	    }
		  70%{
		  	-webkit-transform: rotate(-45deg) translateX(-45px);
		  }
      100% { 
        -webkit-transform: rotate(0deg) translateX(0px);
      }
    }
@-moz-keyframes rotatemoz {
      0% {
        -moz-transform: rotate(0deg) translateX(0px);
      }
	    30%{
	    	-moz-transform: rotate(45deg) translateX(45px);
	    }
		  70%{
		  	-moz-transform: rotate(-45deg) translateX(-45px);
		  }
      100% { 
        -moz-transform: rotate(0deg) translateX(0px);
      }
    }

@-webkit-keyframes rotate2 {
      0% {
        -webkit-transform: rotate(0deg) translateX(-400px);
      }
	    30%{
	    	-webkit-transform: rotate(45deg) translateX(245px);
	    }
		  70%{
		  	-webkit-transform: rotate(-45deg) translateX(-245px);
		  }
      100% { 
        -webkit-transform: rotate(0deg) translateX(400px);
      }
    }
@-moz-keyframes rotatemoz2 {
      0% {
        -webkit-transform: rotate(0deg) translateX(-400px);
      }
	    30%{
	    	-moz-transform: rotate(45deg) translateX(245px);
	    }
		  70%{
		  	-moz-transform: rotate(-45deg) translateX(-245px);
		  }
      100% { 
        -moz-transform: rotate(0deg) translateX(400px);
      }
    }