Claude Code के साथ CSS Advanced Techniques

CSS Animation की Advanced Techniques में Mastery

Basic transition और keyframe से आगे, practical CSS animation techniques को Claude Code से efficiently implement करने का तरीका समझाते हैं।

Scroll-linked Animation

> सिर्फ CSS से scroll-linked animation implement करो।
> Scroll-driven Animations API use करो।

/* Scroll progress bar */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-accent);
  transform-origin: left;
  animation: scaleProgress linear;
  animation-timeline: scroll();
}

@keyframes scaleProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Element appear animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

View Transitions API

// Page transition animation
async function navigateWithTransition(url: string) {
  if (!document.startViewTransition) {
    window.location.href = url;
    return;
  }

  const transition = document.startViewTransition(async () => {
    const response = await fetch(url);
    const html = await response.text();
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    document.body.innerHTML = doc.body.innerHTML;
    document.title = doc.title;
    window.history.pushState({}, '', url);
  });

  await transition.finished;
}

/* View Transitions customization */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

@keyframes fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

@keyframes fade-in {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}

/* Individual elements का transition */
.card-image {
  view-transition-name: card-hero;
}

::view-transition-old(card-hero),
::view-transition-new(card-hero) {
  animation-duration: 0.4s;
}

Complex Keyframe Animations

/* Typing animation */
.typing {
  overflow: hidden;
  border-right: 2px solid var(--color-accent);
  white-space: nowrap;
  animation:
    typing 3s steps(30) 1s forwards,
    blink 0.75s step-end infinite;
  width: 0;
}

@keyframes typing {
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* Particle animation */
.particle {
  --delay: 0s;
  --x: 0px;
  --y: 0px;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: particle 1.5s var(--delay) ease-out infinite;
}

@keyframes particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) scale(0);
  }
}

Performance Optimization

/* GPU acceleration का उपयोग */
.animated-element {
  /* सिर्फ transform और opacity animate करें */
  will-change: transform, opacity;
  transform: translateZ(0); /* Independent layer बनाएं */
}

/* Animation complete होने के बाद will-change हटाएं */
.animated-element.done {
  will-change: auto;
}

/* Layout shift से बचें */
.expand-animation {
  /* height की जगह max-height use करें */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.expand-animation.open {
  max-height: 500px; /* पर्याप्त height */
}

Accessibility Support

/* Animation reduce setting का सम्मान */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .typing {
    width: 100%;
    border-right: none;
  }

  .progress-bar {
    animation: none;
    transform: scaleX(1);
  }
}

Summary

Advanced CSS animations में, performance optimization और accessibility का balance महत्वपूर्ण है। Claude Code का उपयोग करके, View Transitions API और Scroll-driven Animations जैसी latest features भी accurately implement की जा सकती हैं। CSS variables के साथ combine करके, animation parameters को भी flexibly manage किया जा सकता है। View Transitions API के details के लिए Chrome Developers देखें।