CSS Only Marquee Effect

The History and Deprecation of the HTML Marquee Element

The <marquee> element blessed (and sometimes cursed) the early web with the ability to insert scrolling text onto any webpage. Introduced in the early days of HTML, it offered simple attributes to control scroll direction, speed, and behavior.

However, the marquee element eventually faced deprecation. The MDN documentation explicitly warns developers to avoid using it, noting that the feature may cease to work at any time. Several usability concerns led to this deprecation:

• Marquee elements can be too distracting for users
• They don't respect reduced-motion preferences
• In most cases, they render text difficult or impossible to read

The modern web development approach recommends using CSS animations with transforms instead of the deprecated element. This provides complete control over the animation while maintaining accessibility standards.

Understanding these historical tradeoffs helps developers make informed decisions about when marquee effects enhance versus detract from the user experience.

Why Use CSS-Only Marquee Effects in Modern Web Development

The marquee effect remains valuable in contemporary web design for several strategic reasons. It draws attention to important announcements, highlights special offers, or showcases client logos and testimonials. When implemented correctly, a marquee animation adds visual interest without compromising user experience.

Modern CSS-only approaches offer significant advantages:

1. Complete Customization - Control speed, direction, easing, and responsiveness without JavaScript
2. Performance - CSS animations run on the compositor thread in modern browsers, ensuring smooth 60fps performance
3. Accessibility - CSS respects accessibility preferences out of the box, allowing users to disable animations

The flexibility of modern CSS also means marquees work seamlessly across all screen sizes and devices. When paired with responsive web design practices, marquee animations adapt gracefully from mobile phones to large desktop displays. For e-commerce sites, marquee effects can highlight promotions in a way that captures attention without disrupting the shopping experience.

The Content Duplication Technique for Seamless Infinite Loops

Creating a truly seamless infinite marquee requires a clever technique: content duplication. The concept involves placing two copies of the same content side by side within a container, then animating both simultaneously. This creates the illusion of continuous scrolling because the second copy fills the visible area exactly as the first copy exits.

<div class="marquee">
 <ul class="marquee__content">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
 <!-- Mirrors the content above -->
 <ul class="marquee__content" aria-hidden="true">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
</div>

Setting aria-hidden="true" on the duplicate content prevents screen readers from announcing the repeated content, maintaining accessibility for assistive technology users. This technique is fundamental to creating smooth, professional-grade animations using CSS best practices.

Responsive Flexbox Layout

A fully responsive marquee requires careful CSS layout choices using flexbox:

.marquee {
 --gap: 1rem;
 display: flex;
 overflow: hidden;
 user-select: none;
 gap: var(--gap);
}

.marquee__content {
 flex-shrink: 0;
 display: flex;
 justify-content: space-around;
 min-width: 100%;
 gap: var(--gap);
}

This CSS accomplishes several important goals:

• Flexbox on both parent and child containers places every item on a single row without wrapping
• overflow: hidden on the parent conceals elements as they snap back during animation loops
• user-select: none prevents users from accidentally highlighting text inside the marquee
• flex-shrink: 0 prevents child containers from overlapping
• min-width: 100% stretches each child container to span the full parent width

These foundational CSS techniques form the basis of many modern web layouts beyond marquees.

The Animation Keyframes

The animation uses translateX to move content horizontally:

@keyframes scroll {
 from {
 transform: translateX(0);
 }
 to {
 transform: translateX(calc(-100% - var(--gap)));
 }
}

Critical detail: Including the gap value in the translation calculation prevents visible misalignment when the animation loops. Without var(--gap) in the translateX calculation, there would be a noticeable jump as the animation resets. This attention to detail separates professional implementations from amateur attempts.

For developers exploring advanced CSS techniques, the marquee demonstrates how transforms can create complex visual effects with minimal code.

Modern CSS Approaches with Advanced Features

Beyond the traditional keyframe approach, modern CSS offers increasingly sophisticated techniques using the CSS offset property combined with shape() functions:

img {
 offset: shape(from calc(var(--s)/-2) 50%, hline by calc(sibling-count() * var(--s)));
 animation: x var(--d) linear infinite calc(-1 * sibling-index() * var(--d) / sibling-count());
}

Key modern CSS functions:

• sibling-count() - Returns the total number of sibling elements
• sibling-index() - Provides each element's position within its siblings
• shape() - Uses commands similar to SVG path syntax with full CSS functionality

These functions create staggered animations that appear continuous without manual calculations. While cutting-edge, these features have limited browser support in Chrome-based browsers only. For production websites requiring broad compatibility, the traditional keyframe approach remains the safest choice. Staying current with CSS developments helps you know when to adopt new techniques.

Performance Optimization for Marquee Animations

CSS animations generally perform well because they run on the browser's compositor thread. However, these practices ensure optimal performance:

Best Practices

1. Use transform: translateX() - Animating left or margin properties triggers layout recalculations; transforms only affect compositing

2. Set explicit dimensions - Ensure marquee containers have clear boundary constraints to prevent unnecessary reflows

3. Optimize images - Preload marquee images or use placeholder colors until images load

4. Avoid animating paint properties - Properties like opacity or filter on items with complex backgrounds create unnecessary paint operations

Example: Performance-Optimized Animation

.marquee__content {
 will-change: transform;
 animation: scroll 20s linear infinite;
}

The will-change property hints to the browser that transforms will animate, allowing for optimization preparations. Combined with our performance optimization services, these techniques ensure your animations run smoothly on all devices.

Accessibility Best Practices

Accessibility requires careful attention when implementing marquee animations.

Respect Reduced Motion

The most critical consideration is respecting the prefers-reduced-motion media query:

@media (prefers-reduced-motion: reduce) {
 .marquee__content {
 animation: none;
 }

 .marquee {
 overflow-x: auto;
 }
}

This approach disables the animation and enables horizontal scrolling, allowing users to view all content at their own pace.

Additional Guidelines

• Speed - Set appropriate animation speeds that maintain readability. Fast-scrolling text can cause issues
• Content placement - Marquees work best for decorative or supplementary content, not critical information
• Screen readers - Use aria-hidden="true" on duplicated content to prevent redundant announcements

Following WCAG guidelines ensures your marquees are accessible to all users, including those with vestibular disorders or motion sensitivity. This commitment to accessibility reflects our broader approach to inclusive web design.

Tailwind CSS Implementation

For projects using Tailwind CSS, marquee animations require custom animation definitions:

@import "tailwindcss";
@theme {
 --animate-marquee: marquee 15s linear infinite;
 --animate-marquee2: marquee2 15s linear infinite;

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

 @keyframes marquee2 {
 0% { transform: translateX(100%); }
 100% { transform: translateX(0%); }
 }
}

HTML Structure:

<div class="relative flex overflow-x-hidden">
 <div class="animate-marquee whitespace-nowrap space-x-3 py-10">
 <span class="mx-4 text-4xl">Item 1</span>
 <span class="mx-4 text-4xl">Item 2</span>
 <span class="mx-4 text-4xl">Item 3</span>
 </div>
 <div class="absolute top-0 animate-marquee2 whitespace-nowrap space-x-3 py-10">
 <span class="mx-4 text-4xl">Item 1</span>
 <span class="mx-4 text-4xl">Item 2</span>
 <span class="mx-4 text-4xl">Item 3</span>
 </div>
</div>

Tailwind's responsive prefixes (md:, lg:) enable different configurations at different breakpoints. This approach integrates seamlessly with our Tailwind CSS development workflow.

Best Practices Summary

Creating effective CSS-only marquee animations requires balancing visual appeal with performance and accessibility:

• Respect user preferences - Use prefers-reduced-motion to disable animations for users who prefer less motion
• Use aria-hidden - Duplicate content should be hidden from screen readers
• Animate with transforms - Use translateX for optimal performance
• Set appropriate speeds - Slower animations maintain readability and reduce cognitive load
• Test across devices - Ensure consistent experiences on all screen sizes and browsers
• Use for decorative content - Marquees work best for supplementary information, not critical content

The modern CSS approach transforms the marquee from a nostalgic relic into a powerful, accessible design tool. By mastering these techniques, you can create smooth animations that enhance user experience without compromising performance or inclusivity. These same principles apply across our full range of web development services.

Sources

1. MDN Web Docs - Marquee Element - Historical context, deprecation notice, and modern CSS alternatives
2. Ryan Mulligan - CSS Marquee Guide - Responsive flexbox-based approach with accessibility considerations
3. Frontend Masters - Infinite Marquee Animation - Modern CSS techniques using shape() and sibling-*() functions
4. FlyonUI - Tailwind Marquee Effect - Tailwind CSS implementation with custom animations