About

The HTML <marquee> tag was deprecated in HTML5, leaving developers without a native scrolling text solution. Modern browsers still render legacy marquees inconsistently, with Safari applying different default speeds than Chrome, and Firefox handling scrollamount values unpredictably. This generator produces pure CSS animation code that behaves identically across all browsers. The animation timing follows the formula t = d ÷ v, where d represents total travel distance and v is pixels per second. Inline marquees break responsive layouts because they ignore parent container widths. Generated code uses percentage-based transforms that scale correctly from 320px mobile screens to 4K displays.

Accessibility compliance requires pause-on-hover functionality per WCAG 2.1 Success Criterion 2.2.2. Users with vestibular disorders may experience nausea from continuous motion. The output includes prefers-reduced-motion media queries that halt animation when system accessibility settings request it. Animation speeds below 30px/s strain readability while speeds above 300px/s become illegible. Default values target the 80−150px/s range identified in eye-tracking studies as optimal for peripheral reading.

Formulas

Animation duration derives from classical kinematics. The text element must traverse its own width plus the container width to complete one full scroll cycle.

t = w_container + w_textv

Where t is animation duration in seconds, w_container is the marquee container width in pixels, w_text is the scrolling text element width, and v is velocity in pixels per second. For percentage-based CSS animations, the transform calculation simplifies since both distances are expressed as 100% of their respective widths.

t_css = 2 × w_containerv

The generator uses a base speed factor where v = 100 − speed_input to create an intuitive slider (higher value equals faster motion). The easing function linear ensures constant velocity throughout the animation cycle. For bounce mode, the timing function changes to ease-in-out with animation-direction: alternate to simulate deceleration at edges.

Reference Data

Direction	CSS Transform Start	CSS Transform End	Use Case
Left (Default)	`translateX(100%)`	`translateX(-100%)`	News tickers, stock prices, headlines
Right	`translateX(-100%)`	`translateX(100%)`	RTL languages (Arabic, Hebrew), reverse emphasis
Up	`translateY(100%)`	`translateY(-100%)`	Credit rolls, announcement boards
Down	`translateY(-100%)`	`translateY(100%)`	Falling text effects, notifications
Bounce	`translateX(0)`	`translateX(calc(100% - scrollWidth))`	Attention-grabbing alerts, limited space

Speed Class	Pixels/Second	Duration (400px container)	Readability
Very Slow	30px/s	26.7s	Easy reading, long content
Slow	60px/s	13.3s	Comfortable, announcements
Medium	100px/s	8s	Balanced, general purpose
Fast	150px/s	5.3s	Tickers, short phrases
Very Fast	250px/s	3.2s	Urgency, single words only

Font Family	Category	Best For	Web Safe
Arial	Sans-serif	General purpose, high legibility	Yes
Georgia	Serif	Formal announcements, news	Yes
Courier New	Monospace	Technical data, code displays	Yes
Verdana	Sans-serif	Small sizes, screen reading	Yes
Times New Roman	Serif	Traditional, print-style	Yes
Trebuchet MS	Sans-serif	Modern, friendly tone	Yes
Impact	Sans-serif	Bold headlines, emphasis	Yes
Comic Sans MS	Casual	Informal, children's content	Yes
Lucida Console	Monospace	Technical displays	Yes
Palatino Linotype	Serif	Elegant, literary	Yes

Frequently Asked Questions

Animation duration is fixed in seconds, but travel distance varies with container width. A 10-second animation across a 1920px monitor moves at 384px/s, while the same duration on a 375px phone yields 75px/s. For consistent perceived speed, calculate duration dynamically using JavaScript: duration = containerWidth / desiredPixelsPerSecond. The generator provides a base calculation assuming standard widths. Adjust the speed slider after testing on target devices.

The generated code includes hover-pause functionality by default. The CSS rule animation-play-state: paused activates on :hover. For touch devices lacking hover states, add a click/tap event listener that toggles a paused class. Screen reader users benefit from this pause capability per WCAG 2.2.2 requirements for motion control.

Horizontal marquees (left/right) support single-line text only. Line breaks cause layout collapse because translateX operates on inline content width. For multi-line scrolling, use vertical direction (up/down) which handles block-level content. Alternatively, join lines with a separator character like • or | for horizontal display.

Short text creates visible gaps during the scroll cycle. The element scrolls fully off-screen before reappearing, leaving empty space. Solutions include: duplicating the text content (Text • Text • Text •), reducing container width to match content, or using bounce mode which keeps text always visible within bounds.

Email client support is severely limited. Gmail strips all CSS animations. Outlook ignores keyframes entirely. Apple Mail partially renders animations but with inconsistent timing. For email marquees, use fallback static text or GIF animations. The generated HTML/CSS code is designed for web browsers, not email rendering engines.

Each marquee instance requires a unique animation name to prevent CSS conflicts. The generator appends a timestamp or random suffix to keyframe names. For synchronized start times, wrap all marquees in a parent container and trigger animations via a shared class addition using JavaScript. Animation delays can stagger start times for cascading effects.