Css3 text animation to fly in - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Text

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Text

Description

Css3 text animation to fly in

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.rw-words {<!--from  ww  w.  j  ava2s .com-->
   text-align: center;
   left: 0px;
   width: 100%;
   font-family: 'Dosis', sans-serif;
}

.rw-words span {
   position: absolute;
   font-size: 80px;
   left: 0px;
   width: 100%;
   text-align: center;
   top: 25%;
   color: transparent;
   text-shadow: 0px 0px 80px rgba(255, 255, 255, 1);
   opacity: 0;
   -webkit-animation: rotateWord 9s infinite;
   -ms-animation: rotateWord 9s infinite;
   animation: rotateWord 9s infinite;
   line-height: 130px;
}

.rw-words span:nth-child(2) {
   -webkit-animation-delay: 3s;
   -ms-animation-delay: 3s;
   animation-delay: 3s;
}

.rw-words span:nth-child(3) {
   -webkit-animation-delay: 6s;
   -ms-animation-delay: 6s;
   animation-delay: 6s;
}

@-webkit-keyframes rotateWord {
   0% {
      opacity: 0;
      -webkit-animation-timing-function: ease-in;
      -webkit-transform: translateY(-200px) translateZ(300px) rotateY(-120deg);
   }
   5% {
      opacity: 1;
      -webkit-animation-timing-function: ease-out;
      -webkit-transform: translateY(0px) translateZ(0px) rotateY(0deg);
   }
   6% {
      text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
      color: #000;
   }
   17% {
      opacity: 1;
      text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
      color: #000;
   }
   20% {
      opacity: 0;
   }
   100% {
      opacity: 0;
   }
}

@-ms-keyframes rotateWord {
   0% {
      opacity: 0;
      -ms-animation-timing-function: ease-in;
      -ms-transform: translateY(-200px) translateZ(300px) rotateY(-120deg);
   }
   5% {
      opacity: 1;
      -ms-animation-timing-function: ease-out;
      -ms-transform: translateY(0px) translateZ(0px) rotateY(0deg);
   }
   6% {
      text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
      color: #000;
   }
   17% {
      opacity: 1;
      text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
      color: #000;
   }
   20% {
      opacity: 0;
   }
   100% {
      opacity: 0;
   }
}

@keyframes rotateWord {
   0% {
      opacity: 0;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      -webkit-transform: translateY(-200px) translateZ(300px) rotateY(-120deg);
      transform: translateY(-200px) translateZ(300px) rotateY(-120deg);
   }
   5% {
      opacity: 1;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      -webkit-transform: translateY(0px) translateZ(0px) rotateY(0deg);
      transform: translateY(0px) translateZ(0px) rotateY(0deg);
   }
   6% {
      text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
      color: #000;
   }
   17% {
      opacity: 1;
      text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
      color: #000;
   }
   20% {
      opacity: 0;
   }
   100% {
      opacity: 0;
   }
}

      </style> 
 </head> 
 <body> 
  <div class="rw-words"> 
   <span>Sample Text1</span> 
   <span>Sample Text2</span> 
   <span>Sample Text3</span> 
  </div>  
 </body>
</html>

Related Tutorials