Moving Text Animation CSS

Moving Text Animation CSS
Code Snippet:Moving Text - CSS Animation Setup w/ Marquee Tag
Author: Chris Drinkut
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 5,887
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - 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. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X