p]:inline” data-streamdown=”list-item”>General CADD Pro Tutorial: From Basics to Advanced Workflows

Tutorial: How to Create and Use Animated HTML Attributes Safely

Introduction

This tutorial shows how to add simple animation attributes to HTML elements (like a custom data-sd-animate) and how to use them with CSS and JavaScript in a safe, accessible way. It assumes you’re building for modern browsers and want lightweight, reusable animations without external libraries.

1. Define the HTML structure

Use data attributes to mark elements that should animate:

html

<div class=“card” data-sd-animate=“fade-up” data-duration=“600” data-delay=“100”><h3>Card title</h3>  <p>Card content…</p></div>

2. Create CSS animation classes

Provide base styles and animation keyframes:

css

.card {  opacity: 0;  transform: translateY(10px);  transition: opacity 400ms ease, transform 400ms ease;}
[data-animated=“true”] {  opacity: 1;  transform: translateY(0);}
/* Optional detailed keyframes for more complex effects */@keyframes fade-up {  from { opacity: 0; transform: translateY(10px); }  to   { opacity: 1; transform: translateY(0); }}

3. Implement JavaScript to trigger animations

Use IntersectionObserver for performance and to respect reduced-motion preferences:

const prefersReducedMotion = window.matchMedia(’(prefers-reduced-motion: reduce)’).matches;
if (!prefersReducedMotion) {  const observer = new IntersectionObserver((entries) => {    entries.forEach(entry => {      const el = entry.target;      if (entry.isIntersecting) {        const type = el.dataset.sdAnimate || ‘fade-up’;        const duration = el.dataset.duration || 400;        const delay = el.dataset.delay || 0;        el.style.transitionDuration = ${</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">duration</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0A3069; --shiki-dark: #A5D6FF;">}ms;        el.style.transitionDelay = ${</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">delay</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0A3069; --shiki-dark: #A5D6FF;">}ms;        el.setAttribute(‘data-animated’, ‘true’);        // Optionally apply keyframe animation:        // el.style.animation = ${type} ${duration}ms ease ${delay}ms forwards;        observer.unobserve(el);      }    });  }, { threshold: 0.1 });
  document.querySelectorAll(’[data-sd-animate]’).forEach(el => observer.observe(el));} else {  // If user prefers reduced motion, reveal elements without animation  document.querySelectorAll(’[data-sd-animate]’).forEach(el => el.setAttribute(‘data-animated’, ‘true’));}

4. Accessibility considerations

Respect prefers-reduced-motion (handled above).
Ensure animations do not obscure content or cause motion sickness.
Keep interactive controls focusable and avoid changing layout in ways that break keyboard navigation.

5. Advanced tips

Use hardware-accelerated properties (transform, opacity).
Debounce heavy DOM updates.
Create reusable utility classes for common durations/delays.
Allow toggling animations via a user setting stored in localStorage.

Conclusion

Using custom data attributes like data-sd-animate makes animations declarative and maintainable. Combine CSS transitions, IntersectionObserver, and reduced-motion checks for performant, accessible effects.