Css3 Text Animation

#animated_div { width:75px; height:70px; background:url(images/h.png) no-repeat; color:#ffffff; position:relative;
animation:animated_div 5s 1; -moz-animation:animated_div 5s 1; -webkit-animation:animated_div 5s 1; -o-animation:animated_div 5s 1;
-webkit-border-radius:5px; float:left; animation-iteration-count:1; -webkit-animation-iteration-count:1;}
@keyframes animated_div{ 0%{transform: rotate(0deg);left:0px;} 25%{transform: rotate(20deg);left:0px;} 50%{transform: rotate(0deg);left:500px;}
55%{transform: rotate(0deg);left:500px;} 70%{transform: rotate(0deg);left:500px;} 100%{transform: rotate(-360deg);left:0px;} }
@-webkit-keyframes animated_div { 0%{-webkit-transform: rotate(0deg);left:0px;} 25%{-webkit-transform: rotate(20deg);left:0px;}
50%{-webkit-transform: rotate(0deg);left:500px;} 55%{-webkit-transform: rotate(0deg);left:500px;}
70%{-webkit-transform: rotate(0deg);left:500px;} 100%{-webkit-transform: rotate(-360deg);left:0px;} }
@-moz-keyframes animated_div{ 0%{-moz-transform: rotate(0deg);left:0px;}25%{-moz-transform: rotate(20deg);left:0px;}
50%{-moz-transform: rotate(0deg);left:500px;}55%{-moz-transform: rotate(0deg);left:500px;}
70%{-moz-transform: rotate(0deg);left:500px;}100%{-moz-transform: rotate(-360deg);left:0px;}}
@-o-keyframes animated_div{0%{transform: rotate(0deg);left:0px;}25%{transform: rotate(20deg);left:0px;}
50%{transform: rotate(0deg);left:500px;}55%{transform: rotate(0deg);left:500px;}
70%{transform: rotate(0deg);left:500px;}100%{transform: rotate(-360deg);left:0px;}}
/*------------------------------------------------------------------------------------*/
#animated_div1 { width:39px; height:70px; background:url(images/i.png) no-repeat; color:#ffffff; position:relative;
animation:animated_div 5s 1; -moz-animation:animated_div 5s 1; -webkit-animation:animated_div 5s 1; -o-animation:animated_div 5s 1;
-webkit-border-radius:5px; float:left; animation-iteration-count:1; -webkit-animation-iteration-count:1;
animation-delay:1s; -webkit-animation-delay:1s; }
@keyframes animated_div1{ 0%{transform: rotate(0deg);left:0px;} 25%{transform: rotate(20deg);left:0px;} 50%{transform: rotate(0deg);left:500px;}
55%{transform: rotate(0deg);left:500px;} 70%{transform: rotate(0deg);left:500px;} 100%{transform: rotate(-360deg);left:0px;} }
@-webkit-keyframes animated_div1 { 0%{-webkit-transform: rotate(0deg);left:0px;} 25%{-webkit-transform: rotate(20deg);left:0px;}
50%{-webkit-transform: rotate(0deg);left:500px;} 55%{-webkit-transform: rotate(0deg);left:500px;}
70%{-webkit-transform: rotate(0deg);left:500px;} 100%{-webkit-transform: rotate(-360deg);left:0px;} }
@-moz-keyframes animated_div1{ 0%{-moz-transform: rotate(0deg);left:0px;}25%{-moz-transform: rotate(20deg);left:0px;}
50%{-moz-transform: rotate(0deg);left:500px;}55%{-moz-transform: rotate(0deg);left:500px;}
70%{-moz-transform: rotate(0deg);left:500px;}100%{-moz-transform: rotate(-360deg);left:0px;}}
@-o-keyframes animated_div1{0%{transform: rotate(0deg);left:0px;}25%{transform: rotate(20deg);left:0px;}
50%{transform: rotate(0deg);left:500px;}55%{transform: rotate(0deg);left:500px;}
70%{transform: rotate(0deg);left:500px;}100%{transform: rotate(-360deg);left:0px;}}
/*------------------------------------------------------------------------------------*/
#animated_div2 { width:65px; height:70px; background:url(images/o.png) no-repeat; color:#ffffff; position:relative;
animation:animated_div 5s 1; -moz-animation:animated_div 5s 1; -webkit-animation:animated_div 5s 1; -o-animation:animated_div 5s 1;
-webkit-border-radius:5px; float:left; animation-iteration-count:1; -webkit-animation-iteration-count:1;
animation-delay:2s; -webkit-animation-delay:2s; }
@keyframes animated_div2{ 0%{transform: rotate(0deg);left:0px;} 25%{transform: rotate(20deg);left:0px;} 50%{transform: rotate(0deg);left:500px;}
55%{transform: rotate(0deg);left:500px;} 70%{transform: rotate(0deg);left:500px;} 100%{transform: rotate(-360deg);left:0px;} }
@-webkit-keyframes animated_div2 { 0%{-webkit-transform: rotate(0deg);left:0px;} 25%{-webkit-transform: rotate(20deg);left:0px;}
50%{-webkit-transform: rotate(0deg);left:500px;} 55%{-webkit-transform: rotate(0deg);left:500px;}
70%{-webkit-transform: rotate(0deg);left:500px;} 100%{-webkit-transform: rotate(-360deg);left:0px;} }
@-moz-keyframes animated_div2{ 0%{-moz-transform: rotate(0deg);left:0px;}25%{-moz-transform: rotate(20deg);left:0px;}
50%{-moz-transform: rotate(0deg);left:500px;}55%{-moz-transform: rotate(0deg);left:500px;}
70%{-moz-transform: rotate(0deg);left:500px;}100%{-moz-transform: rotate(-360deg);left:0px;}}
@-o-keyframes animated_div2{0%{transform: rotate(0deg);left:0px;}25%{transform: rotate(20deg);left:0px;}
50%{transform: rotate(0deg);left:500px;}55%{transform: rotate(0deg);left:500px;}
70%{transform: rotate(0deg);left:500px;}100%{transform: rotate(-360deg);left:0px;}}
/*------------------------------------------------------------------------------------*/
#animated_div3 { width:67px; height:70px; background:url(images/x.png) no-repeat; color:#ffffff; position:relative;
animation:animated_div 5s 1; -moz-animation:animated_div 5s 1; -webkit-animation:animated_div 5s 1; -o-animation:animated_div 5s 1;
-webkit-border-radius:5px; float:left; animation-iteration-count:1; -webkit-animation-iteration-count:1;
animation-delay:3s; -webkit-animation-delay:3s; }
@keyframes animated_div3{ 0%{transform: rotate(0deg);left:0px;} 25%{transform: rotate(20deg);left:0px;} 50%{transform: rotate(0deg);left:500px;}
55%{transform: rotate(0deg);left:500px;} 70%{transform: rotate(0deg);left:500px;} 100%{transform: rotate(-360deg);left:0px;} }
@-webkit-keyframes animated_div3 { 0%{-webkit-transform: rotate(0deg);left:0px;} 25%{-webkit-transform: rotate(20deg);left:0px;}
50%{-webkit-transform: rotate(0deg);left:500px;} 55%{-webkit-transform: rotate(0deg);left:500px;}
70%{-webkit-transform: rotate(0deg);left:500px;} 100%{-webkit-transform: rotate(-360deg);left:0px;} }
@-moz-keyframes animated_div3{ 0%{-moz-transform: rotate(0deg);left:0px;}25%{-moz-transform: rotate(20deg);left:0px;}
50%{-moz-transform: rotate(0deg);left:500px;}55%{-moz-transform: rotate(0deg);left:500px;}
70%{-moz-transform: rotate(0deg);left:500px;}100%{-moz-transform: rotate(-360deg);left:0px;}}
@-o-keyframes animated_div3{0%{transform: rotate(0deg);left:0px;}25%{transform: rotate(20deg);left:0px;}
50%{transform: rotate(0deg);left:500px;}55%{transform: rotate(0deg);left:500px;}
70%{transform: rotate(0deg);left:500px;}100%{transform: rotate(-360deg);left:0px;}}
/*------------------------------------------------------------------------------------*/
#animated_div4 { width:100px; height:30px; color:#fff; position:relative; font:bold 20px Arial, Helvetica, sans-serif;
animation:animated_div 5s 1; -moz-animation:animated_div 5s 1; -webkit-animation:animated_div 5s 1; -o-animation:animated_div 5s 1;
-webkit-border-radius:5px; border-radius:10px; padding:5px; animation-iteration-count:1; -webkit-animation-iteration-count:1;
animation-delay:8s; -webkit-animation-delay:8s;
text-shadow: 2px 0 0 #12642d, -2px 0 0 #12642d, 0 2px 0 #12642d, 0 -2px 0 #12642d, 1px 1px #12642d, -1px -1px 0 #12642d, 1px -1px 0 #12642d, -1px 1px 0 #12642d;
}
@keyframes animated_div4{ 0%{transform: rotate(0deg);left:0px;} 25%{transform: rotate(20deg);left:0px;} 50%{transform: rotate(0deg);left:500px;}
55%{transform: rotate(0deg);left:500px;} 70%{transform: rotate(0deg);left:500px;} 100%{transform: rotate(-360deg);left:0px;} }
@-webkit-keyframes animated_div4 { 0%{-webkit-transform: rotate(0deg);left:0px;} 25%{-webkit-transform: rotate(20deg);left:0px;}
50%{-webkit-transform: rotate(0deg);left:500px;} 55%{-webkit-transform: rotate(0deg);left:500px;}
70%{-webkit-transform: rotate(0deg);left:500px;} 100%{-webkit-transform: rotate(-360deg);left:0px;} }
@-moz-keyframes animated_div4{ 0%{-moz-transform: rotate(0deg);left:0px;}25%{-moz-transform: rotate(20deg);left:0px;}
50%{-moz-transform: rotate(0deg);left:500px;}55%{-moz-transform: rotate(0deg);left:500px;}
70%{-moz-transform: rotate(0deg);left:500px;}100%{-moz-transform: rotate(-360deg);left:0px;}}
@-o-keyframes animated_div4{0%{transform: rotate(0deg);left:0px;}25%{transform: rotate(20deg);left:0px;}
50%{transform: rotate(0deg);left:500px;}55%{transform: rotate(0deg);left:500px;}
70%{transform: rotate(0deg);left:500px;}100%{transform: rotate(-360deg);left:0px;}}

<div id="animated_div"></div>
<div id="animated_div1"></div>
<div id="animated_div2"></div>
<div id="animated_div3"></div>
<div id="animated_div4" style="clear:both; margin-top:10px;">Muthukumarjoo</div>

Tagged in:

• css animation
• Animation
• CSS
• CSS3
• text animation css