Moving Text Animation CSS

This CSS code snippet helps you to create moving text animation. It uses CSS3 keyframes to move text in both left and right direction. Similarly, it also demonstrate the moving text using HTML marquee tag.

You can use this moving text animation for news ticker and latest updates. You just need to place your text inside its markup, then it will started moving.

How to Create Moving Text Animation

1. Fist of all, create the HTML structure for moving text animation as follows. You can use the “example-left” and “example-right” to set the moving direction.

The marquee tag do the same job but it has been deprecated in HTML5. So, use the given CSS classes to make the animated scrolling text.

<section class="early">

<article>
   <p class="example-right">CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts.</p>
</article>
<article>
    <p class="example-left">CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts.</p>
  
   <p class="example-right">CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts.</p>
  
  </article>


<article>
<marquee behavior="scroll" direction="left">Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here</marquee>

<marquee behavior="scroll" direction="right">Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here </marquee>
</article>

  <article>
    <p class="example-left">Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your</p> 
  </article>
  </section>

2. Use the following CSS to move text.

article {
  max-width: 600px;
  margin: 1em auto;
  overflow: hidden;
  position: relative;
  min-height: 4em;
}

.example-left {
  white-space: nowrap;
  position: absolute;
  text-transform: uppercase;
}

.example-left {
  -webkit-animation: mymove 8s linear infinite; /* Safari 4.0 - 8.0 */
  white-space: nowrap;
  animation: mymove 8s linear infinite alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  from {
    left: 0;
  }
  to {
    left: -140px;
  }
}

@keyframes mymove {
  from {
    left: 0;
  }
  to {
    left: -140px;
  }
}


.example-right {
  white-space: nowrap;
  position: absolute;
  top:2em;
  opacity: .4;
  text-transform: uppercase;
}

.example-right {
  -webkit-animation: urmove 8s linear infinite; /* Safari 4.0 - 8.0 */
  white-space: nowrap;
  animation: urmove 8s linear infinite alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes urmove {
  from {
    right: 0;
  }
  to {
    right: -140px;
  }
}

@keyframes urmove {
  from {
    right: 0;
  }
  to {
    right: -140px;
  }
}


@keyframes early 
{ from { opacity:1; } to { opacity:0; } }

.early {
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */

    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

    animation-duration:1s;
    animation-delay: 1.5s
}

That’s all! hopefully, you have successfully integrated this moving text animation into your project. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.