CSS animation auto scrolling text - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Text

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

Description

CSS animation auto scrolling text

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

#box {<!--   w ww  .  java  2  s.  co  m-->
   width: 200px;
   margin: 0 10px 0;
   -webkit-animation-name: move;
   -webkit-animation-duration: 10s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: up;
   -webkit-animation-timing-function:linear;
   margin-top:100%;
}
#box:hover {
   -webkit-animation-play-state: paused;
}
@-webkit-keyframes move {
   0% {
      transform:translateY(0);
   }
   100% {
      transform:translateY(-100%);
   }
}


      </style> 
 </head> 
 <body> 
  <div id="container"> 
   <div id="box">
     A 
    <br> 
    <br> 
    <br> 
    <br> B 
    <br> 
    <br> 
    <br> 
    <br> C 
    <br> 
    <br> 
    <br> 
    <br> D 
    <br> 
    <br> 
    <br> 
    <br> E 
    <br> 
    <br> 
    <br> 
    <br> F 
    <br> 
    <br> 
    <br> 
    <br> G 
    <br> 
    <br> 
    <br> 
    <br> H 
    <br> 
    <br> 
    <br> 
    <br> I 
    <br> 
    <br> 
    <br> 
    <br> J 
    <br> 
    <br> 
    <br> 
    <br> K 
    <br> 
    <br> 
    <br> 
    <br> L 
    <br> 
    <br> 
    <br> 
    <br> M 
    <br> 
    <br> 
    <br> 
    <br> N 
    <br> 
    <br> 
    <br> 
    <br> O 
    <br> 
    <br> 
    <br> 
    <br> P 
    <br> 
    <br> 
    <br> 
    <br> Q 
    <br> 
    <br> 
    <br> 
    <br> R 
    <br> 
    <br> 
    <br> 
    <br> S 
    <br> 
    <br> 
    <br> 
    <br> T 
    <br> 
    <br> 
    <br> 
    <br> U 
    <br> 
    <br> 
    <br> 
    <br> V 
    <br> 
    <br> 
    <br> 
    <br> W 
    <br> 
    <br> 
    <br> 
    <br> X 
    <br> 
    <br> 
    <br> 
    <br> Y 
    <br> 
    <br> 
    <br> 
    <br> Z 
    <br> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials