Text slide animation - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Text

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

Description

Text slide animation

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">
#container {<!-- w w  w.j  a  v a2s  .  co m-->
   width:601px;
}

.content {
   width:301px;
   height:251px;
   overflow:hidden;
   position:relative;
}

#image {
   display:block;
   width:301px;
   height:251px;
   float:left;
}

h1 {
   color:Chartreuse;
   font-size:27px;
   font-weight:bold;
}

#slide {
   position:absolute;
   right:0;
   -webkit-animation:mymove 7s infinite;
   animation:mymove 7s infinite;
   -webkit-animation-iteration-count:2;
   -moz-animation-iteration-count:2;
   -o-animation-iteration-count:2;
   animation-iteration-count:2;
}

.first, .second, .third {
   text-align:right;
}

.second {
   padding-bottom:21px;
}

@-webkit-keyframes mymove  {
   0% {
      right:-211px;
   }
   
   50% {
      right:51px;
   }
   
   100% {
      right:-211px;
   }

}

@keyframes mymove  {
   0% {
      right:-211px;
   }
   
   50% {
      right:51px;
   }
   
   100% {
      right:-211px;
   }

}
</style> 
 </head> 
 <body> 
  <div id="container"> 
   <div class="content"> 
    <div id="image"> 
     <img src="https://www.java2s.com/style/demo/Opera.png" alt="image_1" width="300" height="250" style="display: block; float:left;"> 
    </div> 
    <div id="slide"> 
     <div class="first"> 
      <h1>Lorem</h1> 
     </div> 
     <div class="second"> 
      <span style="color: #aaba38; text-transform:uppercase; font-size: 19px; line-height: 1.5; font-weight: bold; padding-left: 75px; text-align: right;">Lorem i<br>Lorem ipsum do</span> 
     </div> 
     <div class="third" <span style="color: #2f1e16; text-transform:uppercase; font-size: 19px; line-height: 1.5; font-weight: bold;">
       Lorem ipsum d 
      <br> 
      <span style="color: #2f1e16; text-transform:uppercase; font-size: 19px; line-height: 1.5; font-weight: bold;">Lorem ipsum d</span> 
      <br> 
      <span style="color: #2f1e16; text-transform:uppercase; font-size: 19px; line-height: 1.5; font-weight: bold;">Lorem ipsum dol</span> 
      <br> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials