CSS Text Marquee animation Stop on Hover

In this article, we will go through the most commonly used HTML5 marquee tag animation, we will learn how we can stop the marquee on mouse hover, and we will also build a marquee functionality with the latest html5 and css3 keyframes animation, so let first learn something about marquee tag in html5

The <marquee> tag is a non-standard HTML element that was used to create scrolling text or images on web pages. Although it was widely implemented, it has been deprecated in HTML5, meaning it is no longer recommended for use in modern web development.

The <marquee> tag allows content to scroll horizontally or vertically across the screen. It can move text or images in various directions: left, right, up, or down. The basic syntax for using the tag is:

<marquee> Your scrolling content here </marquee>

Attributes

The <marquee> tag supports several attributes that control its behavior and appearance:

Example

Here’s a simple example of a marquee that scrolls text from right to left:

<marquee behavior="scroll" direction="left" scrollamount="5">
    Welcome to My Website!
</marquee>

The above is a simple marquee example, but if you want to build a similar functionality with css3 html5 please follow the below steps

Marquee Text Animation using css3 and html5

HTML Markup

   <div class="tr-cross-scrtips">
        <div class="tr-cross-scrtips--one">
          <div class="marquee">
            <div class="track track-left">
              <div class="content">
                <ul class="marquee marque-left">
                  <li>Share Unique Experience</li>
                  <li>Discover Hidden Gems</li>
                  <li>Post Captivating Stories</li>
                  <li>Rate Accommodations</li>
                  <li>Create Photo Albums</li>
                  <li>Explore Restaurants</li>
                  <li>Connect with Individuals</li>
                  <li>Share Unique Experience</li>
                  <li>Discover Hidden Gems</li>
                  <li>Share Unique Experience</li>
                  <li>Discover Hidden Gems</li>
                  <li>Post Captivating Stories</li>
                  <li>Rate Accommodations</li>
                  <li>Create Photo Albums</li>
                  <li>Explore Restaurants</li>
                  <li>Connect with Individuals</li>
                  <li>Share Unique Experience</li>
                  <li>Discover Hidden Gems</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="tr-cross-scrtips--two">
          <div class="marquee">
            <div class="track track-right">
              <div class="content">
                <ul class="marquee marque-left">
                  <li>Share Unique Experience</li>
                  <li>Discover Hidden Gems</li>
                  <li>Post Captivating Stories</li>
                  <li>Rate Accommodations</li>
                  <li>Create Photo Albums</li>
                  <li>Explore Restaurants</li>
                  <li>Connect with Individuals</li>
                  <li>Share Unique Experience</li>
                  <li>Discover Hidden Gems</li>
                  <li>Share Unique Experience</li>
                  <li>Discover Hidden Gems</li>
                  <li>Post Captivating Stories</li>
                  <li>Rate Accommodations</li>
                  <li>Create Photo Albums</li>
                  <li>Explore Restaurants</li>
                  <li>Connect with Individuals</li>
                  <li>Share Unique Experience</li>
                  <li>Discover Hidden Gems</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

CSS Code

<style>
.tr-cross-scrtips {
  width: 100%;
  height: auto;
  display: flex;
  position: relative;
  z-index: 12;
  align-self: baseline;
  background: #ffffff;

  position: relative;
  flex-direction: column;
  background: #ffffff;
}
.tr-cross-scrtips--one {
  width: 130%;
 
  background: yellow;
 
  position: relative;
  z-index: 3;
  margin-right: -15px;
  margin-left: -15px;
  transform-origin: right;
  display: flex;
  align-items: center;
}
.tr-cross-scrtips--two {
  width: 130%;

  background: black;
 
  position: relative;
  margin-right: -15px;
  margin-left: -15px;
  z-index: 2;
  transform-origin: left;
  display: flex;
  align-items: center;
}


.tr-cross-scrtips ul {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: center;
}
.tr-cross-scrtips ul li {
  margin: 0px 10px;
  font-weight: bold;
  color:black;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  font-size: 90px;
  padding: 20px;
}
.tr-cross-scrtips ul li::before {
  content: '';
  height: 30px;
  display: flex;
  width: 30px;
  margin-right: 10px;

  background: black;
  border-radius: 50%;
}
.tr-cross-scrtips .tr-cross-scrtips--two ul li::before {
  background: white;
}
.tr-cross-scrtips .tr-cross-scrtips--two ul li {
  margin: 0px 10px;
  font-weight: bold;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;

}
.track:hover {
  animation-play-state: paused;
}

.track {

  white-space: nowrap;
  will-change: transform;
}
.track-left {
  animation: marquee-left 40s linear infinite;
}
.track-right {
  animation: marquee-right 40s linear infinite;
}
@keyframes marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0%);
  }
}
</style>

In the above code, we have created a strip that will scroll horizontally continues on the page and also stops on hover on the strip

.track-left {
  animation: marquee-left 40s linear infinite;
}
.track-right {
  animation: marquee-right 40s linear infinite;
}

Track left and track right are the direction classes and to maintain the speed of the marquee you can change the value of animation duration right now it is the 40s, please check the below working demo and you can directly paste it into your code

Working DEMO