Fly in text from right - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Text

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

Description

Fly in text from right

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">

#AdvertBox {<!--from w  w w . j a  va2s .  co m-->
   height: 55px;
   overflow: hidden;
   position: relative;
   background:black;
   color: white;
   border: 1.75px solid yellow;
   font-size: 35px;
   font-style: italic;
   border-radius: 1px;
}
.scroll-left p
{
   position: absolute;
   width: 100%;
   height: 100%;
   margin: 0;
   line-height: 55px;
   text-align: center;
   transform:translateX(100%);
   animation: scroll-left 10s linear infinite;
}
.popIn p
{
   position: absolute;
   width: 100%;
   height: 100%;
   margin: 0;
   line-height: 55px;
   text-align: center;
   transform:translateY(-100%);
   animation: popIn 10s linear infinite;
}
@keyframes scroll-left {
   0% {
      transform: translateX(100%);
   }
   25% {
      opacity: 1;
      transform: translateX(0%);
   }
   39% {
      opacity: 0;
      transform: translateX(0%);
   }
   100% {
      opacity: 0;
      transform: translateX(0%);
   }
}
@keyframes popIn {
   0% {
      transform: translate(0%,-100%);
   }
   50% {
      transform: translate(0%,0%);
   }
   75% {
      transform: translate(0%,0%);
   }
   100% {
      transform: translate(-100%,0%);
   }
}


      </style> 
 </head> 
 <body> 
  <div id="AdvertBox"> 
   <div class="scroll-left"> 
    <p style="position: absolute; z-index: 1 "> Is your <span style="color:#841214">Tax Refund</span> delayed? </p> 
   </div> 
   <div class="popIn"> 
    <p style="position: absolute; z-index: 2 "> <span style="color:#0E1BB1; font-weight:bold;">DRIVE YOUR WAY</span> Today for $0 DOWN! </p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials