Lite

A CSS-only marquee with simple class names and no JavaScript.

Use it
Default
Reverse
Vertical
Stepped timing
Pause on hover
Paused

Use it

Import remarqueeble/lite.css or load dist/lite.css directly. For direct CDN usage, dist/lite.min.css is also available.

<link rel="stylesheet" href="https://unpkg.com/remarqueeble/dist/lite.css" />

The lite CSS follows the simpler pure-CSS pattern and does not require duplicated content. It does not emulate legacy <marquee> measurement, behavior, scrollamount, scrolldelay, or finite loop handling.

When prefers-reduced-motion: reduce is active, animation is disabled and the content is shown statically.

Optional classes: re-marquee--reverse, re-marquee--vertical, re-marquee--paused, and re-marquee--pause-on-hover.

CSS variables:

--re-marquee-duration: animation duration. Defaults to 20s.
--re-marquee-timing-function: animation timing function. Defaults to linear.
--re-marquee-start-pos: starting transform position. Defaults to 0.
--re-marquee-end-pos: ending transform position. Defaults to -100%.

<div class="re-marquee" style="--re-marquee-duration: 12s;">
    <div class="re-marquee__track">CSS-only marquee</div>
</div>

Default

Single-line motion with the base timing.

Fresh build CSS-only no JS required

<div class="re-marquee" style="--re-marquee-duration: 14s;">
    <div class="re-marquee__track">
        <span>Fresh build</span>
        <strong>CSS-only</strong>
        <span>no JS required</span>
    </div>
</div>

Reverse

The same structure, but running in the opposite direction.

Right to left left to right reverse flow

<div class="re-marquee re-marquee--reverse" style="--re-marquee-duration: 18s;">
    <div class="re-marquee__track">
        <span>Right to left</span>
        <span>left to right</span>
        <em>reverse flow</em>
    </div>
</div>

Vertical

A taller lane with stacked content.

Alpha Beta Gamma Delta

<div
    class="re-marquee re-marquee--vertical"
    style="--re-marquee-duration: 16s; block-size: 12rem;">
    <div class="re-marquee__track">
        <span>Alpha</span>
        <span>Beta</span>
        <span>Gamma</span>
        <span>Delta</span>
    </div>
</div>

Stepped timing

Use any CSS animation timing function, including steps(), for chunkier legacy-style motion.

Stepped motion steps(24, end) CSS timing

<div
    class="re-marquee"
    style="--re-marquee-duration: 10s; --re-marquee-timing-function: steps(24, end);">
    <div class="re-marquee__track">
        <span>Stepped motion</span>
        <strong>steps(24, end)</strong>
        <span>CSS timing</span>
    </div>
</div>

Pause on hover

Hover the lane to freeze it.

Hover me and I stop moving

<div
    class="re-marquee re-marquee--pause-on-hover"
    style="--re-marquee-duration: 11s;">
    <div class="re-marquee__track">
        <span>Hover me</span>
        <span>and I stop</span>
        <span>moving</span>
    </div>
</div>

Paused

A static state for holding a frame in place.

Paused on purpose still visible

<div class="re-marquee re-marquee--paused" style="--re-marquee-duration: 11s;">
    <div class="re-marquee__track">
        <span>Paused</span>
        <span>on purpose</span>
        <mark>still visible</mark>
    </div>
</div>

Remarqueeble