<html>
<section class="scroll__with_marquee">
  <!-- A delay can be added and speed <marquee scrolldelay="10"> scrollamount="25" -->
  <marquee direction="left" ; behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();">
    <p class="content__text_marquee">Hi I'm a <span>scrolling</span> text, who stop when the mouse is on it and continue to scroll when is out ! i can go to the right if you change</p>
  </marquee>
  <marquee direction="right" ; behavior="slide" onmouseover="this.stop();" onmouseout="this.start();">
    <p class="content__text_marquee">Hi I'm a <span>slide</span> text, who stop when the mouse is on it and continue, my course stop once i reach the end</p>
  </marquee>
  <marquee direction="left" ; behavior="alternate" onmouseover="this.stop();" onmouseout="this.start();">
    <p class="content__text_marquee">Hi I'm a <span>bounce</span> text who alternate his way, who stop when the mouse is on it and continue to scroll when is out !</p>
  </marquee>
</section>
<section class="scroll__with_css">
  <p class="content__text_css scroll__css">Hi I'm a <span>scrolling</span> text, who stop when the mouse is on it and continue to scroll when is out ! i can go to the right if you change</p>
  <p class="content__text_css slide__css">Hi I'm a <span>slide</span> text, who stop when the mouse is on it and continue, my course stop once i reach the end</p>
  <p class="content__text_css bounce__css">Hi I'm a <span>bounce</span> text who alternate his way, who stop when the mouse is on it and continue to scroll when is out !</p>
</section>

</html>
@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");

/*************Colors************/
:root {
  --background-color: #d5e3d5;
  --bg-color-banners-marquee: #333333;
  --text-color-marquee: #f3f7f3;
  --bg-color-banners-css: #f3f7f3;
  --text-color-css: #333333;
  --text-color-span: #4d9f59;
}

/*************Some style************/
body {
  background-color: var(--background-color);
  font-family: "Permanent Marker", cursive;
  margin: 0;
}

span {
  color: var(--text-color-span);
}

/**********with html marquee***********/
.content__text_marquee {
  text-align: center;
  color: var(--text-color-marquee);
  background-color: var(--bg-color-banners-marquee);
  padding: 0.2rem;
  margin: 0.2rem;
}

/************with CSS************/
/*Require: .scroll__with_cs and .content__text_css:hover*/

.scroll__with_css {
  overflow-x: hidden; /*will hidde the navbar*/
}

.content__text_css:hover {
  animation-play-state: paused; /*Will paused the content without renitialize*/
}

.content__text_css {
  text-align: center;
  background-color: var(--bg-color-banners-css);
  color: var(--text-color-css);
  padding: 0.2rem;
  margin: 0.5rem;
}

/***Scroll effect in CSS***/
.scroll__css {
  transform: translateX(100%);
  animation: move__css linear 25s forwards infinite;
}

@keyframes move__css {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

/***Slide effect in CSS***/
.slide__css {
  animation: slide__move_css 25s ease-out;
}

@keyframes slide__move_css {
  0% {
    -webkit-transform: translateX(100%);
  }
}

/***Bounce in CSS***/
.bounce__css {
  animation: bounce__move_css linear 25s forwards infinite;
}

@keyframes bounce__move_css {
  0%,
  100% {
    -webkit-transform: translateX(70%);
  }
  50% {
    -webkit-transform: translateX(0%);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.