How to create text rotate animation (spin) using css3

Text Rotating effect is one of the intersting thing using css3 animation. It is used to display the different text in using rotating(spin) effects. Rotating the text clock-wise or anti-clock wise using css3 keyframes properties. This effect is very simple to create. This is also helps who want the animated text in their webpages.Below example code  and demos will helps how its looks.

Style for text-rotate animation :

h1{
color: #fff;
font-size: 44px;
margin-top: 40px;
text-align: center;
}
/
.sentence{
     color: #222;
     font-size: 30px;
     text-align: left;
}

/*ClockWise Effect*/
.clockWise{
display: inline;
text-indent: 8px;
}
.clockWise span{
animation: clock 12.5s linear infinite 0s;
-ms-animation: clock 12.5s linear infinite 0s;
-webkit-animation: clock 12.5s linear infinite 0s;
color: #FF9800;
opacity: 0;
overflow: hidden;
position: absolute;
}
.clockWise span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.clockWise span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.clockWise span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.clockWise span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}

/*ClockWise Effect Animation*/
@-moz-keyframes clock{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotate(-180deg); }
10% { opacity: 1; -moz-transform: translateX(0px); }
25% { opacity: 1; -moz-transform: translateX(0px); }
30% { opacity: 0; -moz-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
@-webkit-keyframes clock{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotate(-180deg); }
10% { opacity: 1; -webkit-transform: translateX(0px); }
25% { opacity: 1; -webkit-transform: translateX(0px); }
30% { opacity: 0; -webkit-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes clock{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotate(-180deg); }
10% { opacity: 1; -ms-transform: translateX(0px); }
25% { opacity: 1; -ms-transform: translateX(0px); }
30% { opacity: 0; -ms-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}

Html for text-rotate animation:

<section class="wrapper" style="width:400px; margin-left:auto; margin-right:auto; margin-top:60px;">
  <h2 class="sentence">Our Services are
    <div class="clockWise">
      <span>Web Designing.</span>
      <span>Web Development.</span>
      <span>SEO.</span>
      <span>Digital Marketing.</span>
      <span>SEM.</span>
    </div>
<h5 style="text-align:right;"><a href="http://www.sanwebcorner.com">san web corner</a></h5>
  </h2>
</section>