py-1 [&>p]:inline

I can help, but that title looks incomplete or includes HTML. I’ll assume you want an article about using animated HTML spans like for accessibility and web animation. Here’s a concise, ready-to-publish article:

Using for Accessible Web Animations

Modern websites often rely on subtle micro-animations to draw attention and improve perceived responsiveness. Using a simple attribute like data-sd-animate on a span lets developers declaratively mark inline elements for animation while keeping HTML semantic. Below is a practical guide to implementing these animated spans accessibly and efficiently.

What is data-sd-animate?

The data-sd-animate attribute is a custom data attribute used to flag elements that should receive a JavaScript-driven animation. It’s not built into browsers — instead, developers read this attribute with JS to initialize animations based on the attribute value (e.g., “fade”, “slide-up”, “pulse”).

Why use a data attribute on a span?

• Declarative: Keeps animation intent in markup, separate from JS logic.
• Granular control: Targets inline text or part of a sentence without extra wrapper elements.
• Semantic: Span is neutral and won’t change document structure or accessibility when used correctly.

How to implement

1. Markup: Add the attribute to inline text.
   html

   <p>Welcome to our <span data-sd-animate=“fade”>new feature</span> demo.</p>

2. CSS: Provide base styles and reduced-motion support.
   css

   [data-sd-animate] { display: inline-block; }@media (prefers-reduced-motion: reduce) {[data-sd-animate] { animation: none !important; transition: none !important; }}

3. JavaScript: Initialize animations by reading the attribute value.
   js

   document.querySelectorAll(’[data-sd-animate]’).forEach(el => {  const type = el.getAttribute(‘data-sd-animate’);  if (type === ‘fade’) {    el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 600, easing: ‘ease-out’, fill: ‘forwards’ });  }  // add other types as needed});

Accessibility considerations

• Respect prefers-reduced-motion: disable or simplify animations when users prefer reduced motion.
• Avoid triggering animations on focus unless they enhance understanding; ensure keyboard users can navigate predictably.
• Ensure animations do not interfere with screen reader order or live regions; avoid rapid flashing that can trigger seizures.

Performance tips

• Animate transform and opacity rather than layout-affecting properties.
• Use requestAnimationFrame or the Web Animations API (shown above) for smoother results.
• Debounce animations on scroll or use IntersectionObserver to animate only when elements enter the viewport.

Use cases

• Emphasizing a word in a headline.
• Micro-interactions inside buttons or links.
• Sequential entrance effects for hero text.

Conclusion

Using gives developers a simple, semantic way to add controlled inline animations. Combined with reduced-motion respect, performant techniques, and careful accessibility checks, these animations can enhance UX without harming usability.