JSFiddle - React, Tailwind, and code Playground

by Bramus Van Damme

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Marquee</title>
</head>
<body>
  
  <h1>CSS3 Marquee</h1>
  
  <p>Warning: Firefox only, as it's the only browser that supports <a href="https://developer.mozilla.org/en-US/docs/CSS/element"><code>element()</code> as a value for the background property</a></p>
  
  <h2>Marquee: alternate</h2>
  <div class="marquee short alternate"></div>
  <div class="marquee long alternate"></div>
  
  <h2>Marquee: slide</h2>
  <div class="marquee short slide"></div>
  <div class="marquee long slide"></div>
  
  <h2>Marquee: left</h2>
  <div class="marquee short left"></div>
  <div class="marquee long left"></div>
  
  <h2>Marquee: right</h2>
  <div class="marquee short right"></div>
  <div class="marquee long right"></div>
  
  <h2>Marquee: down</h2>
  <div class="marquee short down"></div>
  <div class="marquee long down"></div>
  
  <h2>Marquee: up</h2>
  <div class="marquee short up"></div>
  <div class="marquee long up"></div>
  
  <div style="overflow:hidden; height:0; width: 0; top: 100px;">
    <span id="marqueeshort">Lorem ipsum</span>
    <span id="marqueelong">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum velit at odio condimentum in dictum sapien dapibus.</span>
  </div>
  
  <h1>FAQ</h1>
    
  <h2>Why not just change the left/right position?</h2>
    
  <p>Because when you use <code>left: -100%;</code> (or <code>transform: translateX(-100%);</code>) that <code>100%</code> accounts for the width of the container (here <code>12em</code>) and not the width of the content.</p>
    
  <p>If you'd have a marquee where the text is longer than the width of the containing element, it'd fail. Here's an example with the marquee set to <code>transform: translateX(-100%);</code>:</p>
    
  <div class="faqwrapper"><div class="marquee faq faq1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum velit at odio condimentum in dictum sapien dapibus.</div></div>
    
 ...

CSS

body {
  font-family: sans-serif;
  font-weight: 300;
  padding: 1em;
}

p {
  font-size: 0.75em;
}

h1, h2, p {
    margin: 0.5em 0;
}

h1 {
    font-size: 2em;
    margin-top: 4em;
}

h2 {
    margin-top: 2em;
}

/* here's what you came for: */

.marquee {
  width: 12em;
  height: 2em;
  background: #000 -moz-element(#marqueeshort) no-repeat;
}

.marquee.long {
  background: #000 -moz-element(#marqueelong) no-repeat;
}

.marquee.alternate {
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-name: marquee-alternate;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.marquee.slide {
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-name: marquee-slide;
  animation-iteration-count: 1;
  background-position: 0 50%; /* for when the animation is done */
}

.marquee.left {
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-name: marquee-horizontal;
  animation-iteration-count: infinite;
}

.marquee.right {
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-name: marquee-horizontal;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

.marquee.long.alternate, .marquee.long.left, .marquee.long.right {
  animation-duration: 5s;
}

.marquee.down {
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-name: marquee-vertical;
  animation-iteration-count: infinite;
}

.marquee.up {
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-name: marquee-vertical;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

#marqueeshort, #marqueelong {
  background: #000;
  color: #FFFF00;
  white-space: nowrap;
  text-align: center;
}

@-moz-keyframes marquee-alternate {
  from {
    background-position: 0 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@-moz-keyframes marquee-slide {
  from {
    background-position: 12em 50%;
  }
  to {
    background-position: 0...