CSS Spinner

Spinner

A Good Thai Citizen Project

HTML

<div id="stage" style="background: rgba(0,0,0,0.5);">
<p id="spinner" style="background: rgba(0,0,0,0.5); text-align: center; line-height: 2;">A Good Thai Citizen Project</p></div>

CSS

/*------------start----- spinning banner-------------*/

#stage {border: 1px solid black;
padding: 10px;
border-radius: 10px;
 margin: 1px auto;
width: 460px;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    perspective: 1200px;
  }
 #spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 18s;

    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 18s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  #spinner:hover {
    -webkit-animation-play-state: paused;
   animation-play-state: paused;
    -webkit-animation-direction: alternate;
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  }
  /* WebKit and Opera browsers */
  @-webkit-keyframes spinner {
  0% {
-webkit-transform: rotateY(-0deg);
     color: white;
     font-size: 36px;}
  20% {
     color: orange;}
  40% {
     color: lightblue;}
   80% {
-webkit-transform: rotateY(-1080deg);
     color: yellow;
     font-size: 36px;}

   100% {
-webkit-transform: rotateY(-1080deg);
     color: red;
     font-size: 36px;}
  }

  /* all other browsers */
  @keyframes spinner {
    0% {
-moz-transform: rotateY(-0deg);
     transform: rotateY(-0deg);
     color: white;
     font-size: 36px;}
   80% {
-moz-transform: rotateY(-1080deg);
     transform: rotateY(-1080deg);
     color: yellow;
     font-size: 36px;}

   100% {
-moz-transform: rotateY(-1080deg);
     transform: rotateY(-1080deg);
     color: red;
     font-size: 36px;}
    }

/*------------end--------- spinning banner---------------*/