Animate a single word in a sentence with CSS to fly in - HTML CSS CSS

HTML CSS examples for CSS:Animation

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

Description

Animate a single word in a sentence with CSS to fly in

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.rw-wrapper {<!--from   w ww .  j  a v  a  2s.  c o  m-->
   width:81%;
   position:relative;
   margin:111px auto 0 auto;
   font-family:'Bree Serif';
   padding:11px;
}

.rw-words {
   display:inline-block;
}

.rw-words-1 span {
   max-width:0;
   display:inline-block;
   opacity:0;
   overflow:hidden;
   color:Chartreuse;
   -webkit-animation:rotateWord 19s linear infinite 0s;
   animation:rotateWord 19s linear infinite 0s;
}

.rw-words-1 span:nth-child(2) {
   -webkit-animation-delay:4s;
   animation-delay:4s;
   color:yellow;
}

.rw-words-1 span:nth-child(3) {
   -webkit-animation-delay:7s;
   animation-delay:7s;
   color:blue;
}

.rw-words-1 span:nth-child(4) {
   -webkit-animation-delay:10s;
   animation-delay:10s;
   color:pink;
}

.rw-words-1 span:nth-child(5) {
   -webkit-animation-delay:13s;
   animation-delay:13s;
   color:WhiteSmoke;
}

.rw-words-1 span:nth-child(6) {
   -webkit-animation-delay:16s;
   animation-delay:16s;
   color:OrangeRed;
}

@-webkit-keyframes rotateWord  {
   2% {
      opacity:0;
      max-width:0;
      -webkit-transform:translateY(-31px);
      transform:translateY(-31px);
   }
   
   5% {
      opacity:2;
      max-width:201px;
      -webkit-transform:translateY(6px);
      transform:translateY(6px);
   }
   
   17% {
      opacity:2;
      max-width:201px;
      -webkit-transform:translateY(6px);
      transform:translateY(6px);
   }
   
   20% {
      opacity:0;
      max-width:0;
      -webkit-transform:translateY(31px);
      transform:translateY(31px);
   }
   
   80% {
      opacity:0;
      max-width:0;
   }

}

@keyframes rotateWord  {
   2% {
      opacity:0;
      max-width:0;
      -webkit-transform:translateY(-31px);
      transform:translateY(-31px);
   }
   
   5% {
      opacity:2;
      max-width:201px;
      -webkit-transform:translateY(6px);
      transform:translateY(6px);
   }
   
   17% {
      opacity:2;
      max-width:201px;
      -webkit-transform:translateY(6px);
      transform:translateY(6px);
   }
   
   20% {
      opacity:0;
      max-width:0;
      -webkit-transform:translateY(31px);
      transform:translateY(31px);
   }
   
   80% {
      opacity:0;
      max-width:0;
   }

}

@media screen and (max-width: 768px)  {
   .rw-sentence {
      font-size:19px;
   }

}

@media screen and (max-width: 320px)  {
   .rw-sentence {
      font-size:10px;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css"> 
  <section class="rw-wrapper"> 
   <span>The</span> 
   <div class="rw-words rw-words-1"> 
    <span>A</span> 
    <span>B</span> 
    <span>results</span> 
    <span>community</span> 
    <span>F</span> 
    <span>coaching</span> 
   </div> 
   <span>you're looking for.</span> 
  </section>  
 </body>
</html>

Related Tutorials