HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>marquee vs CSS animation</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1.5rem; line-height: 1.6; }
    .dep-tag-legacy { border: 1px dashed #f59e0b; padding: 0.75rem; margin: 0.5rem 0; overflow: hidden; }
    .scroll-wrap { overflow: hidden; border: 1px solid #22c55e; padding: 0.5rem; }
    .scroll-text {
      display: inline-block;
      white-space: nowrap;
      animation: scroll-left 8s linear infinite;
    }
    @keyframes scroll-left {
      from { transform: translateX(100%); }
      to   { transform: translateX(-100%); }
    }
  </style>
</head>
<body>
  <h1>marquee vs CSS animation</h1>

  <h2>Legacy (non-standard, deprecated)</h2>
  <div class="dep-tag-legacy">
    <marquee>Scrolling text with &lt;marquee&gt;</marquee>
  </div>

  <h2>Modern replacement</h2>
  <div class="scroll-wrap">
    <span class="scroll-text">Scrolling text with CSS @keyframes</span>
  </div>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Deprecated Tags — marquee vs CSS animation