py-1 [&>p]:inline

with data-sd-animate=”

Introduction

Using animated attributes like data-sd-animate on span elements enables subtle, accessible motion in web interfaces. This article explains practical patterns for applying and controlling animations via a custom data attribute, with examples that work without relying on external frameworks.

When to use data-attribute animations

• Small, decorative motion that doesn’t distract from content.
• Micro-interactions (hover effects, emphasis on load).
• Progressive enhancement: animations should be optional and nonessential.

Accessibility considerations

• Respect reduced-motion preferences: check prefers-reduced-motion and disable nonessential animations.
• Ensure animations don’t cause layout shifts that disrupt reading flow.
• Provide equivalent non-animated states where motion conveys important information.

Semantic HTML pattern

Use a span when you need inline animation without altering document semantics:

• Wrap only the text or icon that needs motion.
• Keep spans minimal and avoid nesting heavy interactive markup inside animated spans.

Example structure:

Animated text

CSS-based animation patterns

Define simple, reusable keyframes and toggle via attribute selectors:

@keyframes fadeIn {from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}
span[data-sd-animate=“fade-in”] {  animation: fadeIn 360ms ease-out both;}

For hover-triggered emphasis:

span[data-sd-animate=“pulse-on-hover”] {  transition: transform 160ms ease;}span[data-sd-animate=“pulse-on-hover”]:hover {  transform: scale(1.06);}

JavaScript control patterns

Use JS to add or remove attributes for precise timing and repeat control:

function triggerAnimation(el, type) {  el.setAttribute(‘data-sd-animate’, type);  el.addEventListener(‘animationend’, () => el.removeAttribute(‘data-sd-animate’), { once: true });}

For queued or staggered animations, apply delays based on index:

document.querySelectorAll(‘[data-sd-animate=“stagger”]’).forEach((el, i) => {  el.style.animationDelay = ${i * 80}ms;});

Respecting reduced motion

Detect user preference and skip animations:

const prefersReduced = window.matchMedia(‘(prefers-reduced-motion: reduce)’).matches;if (prefersReduced) {  document.querySelectorAll(‘[data-sd-animate]’).forEach(el => el.removeAttribute(‘data-sd-animate’));}

Testing and performance

• Test with screen readers and keyboard navigation.
• Keep animations GPU-friendly (transform, opacity).
• Limit simultaneous animated elements to avoid jank.

Conclusion

Using an attribute like data-sd-animate on span elements provides a lightweight, semantic way to add inline animations. Combined with accessibility checks and performance-conscious patterns, it enhances UX without sacrificing readability or responsiveness.