Animation

CSS and JavaScript animations bring web pages to life by creating motion and visual effects. Animations can improve user experience by providing visual feedback, guiding attention, and creating engaging interfaces.

CSS Transitions

Transitions animate changes to CSS properties over time.

css
/* Basic transition */
.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}

/* Multiple properties */
.card {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Shorthand: property duration timing-function delay */
.element {
  transition: all 0.3s ease-in-out 0.1s;
}

Timing Functions

css
.ease { transition-timing-function: ease; }
.linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }

/* Custom cubic-bezier */
.custom {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

CSS Animations

Keyframe animations provide more control than transitions.

css
/* Define keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation */
.fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* Multiple keyframes */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
  animation: pulse 1s infinite;
}

Animation Properties

css
.animated {
  animation-name: slideIn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

/* Shorthand */
.animated {
  animation: slideIn 1s ease-in-out 0.5s infinite alternate forwards;
}

Common Animation Patterns

Fade In/Out

css
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

Slide In

css
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

Bounce

css
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

Spin

css
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

JavaScript Animations

Web Animations API

javascript
// Modern way to animate with JavaScript
const element = document.querySelector('.box');

element.animate(
  [
    { transform: 'translateX(0px)' },
    { transform: 'translateX(100px)' }
  ],
  {
    duration: 1000,
    iterations: 1,
    easing: 'ease-in-out',
    fill: 'forwards'
  }
);

RequestAnimationFrame

javascript
// Smooth, performance-optimized animations
let start;

function animate(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;

  element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;

  if (progress < 2000) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

CSS Class Toggle

javascript
// Simple animation trigger
const box = document.querySelector('.box');

// Add animation class
box.classList.add('animate-in');

// Remove after animation completes
box.addEventListener('animationend', () => {
  box.classList.remove('animate-in');
});

React Animations

CSS Transitions

jsx
function FadeIn({ children }) {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  return (
    <div
      style={{
        opacity: isVisible ? 1 : 0,
        transition: 'opacity 0.5s ease-in'
      }}
    >
      {children}
    </div>
  );
}

Framer Motion

jsx
import { motion } from 'framer-motion';

function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.3 }}
    >
      Content
    </motion.div>
  );
}

Performance Tips

Use Transform and Opacity

css
/* Good: GPU accelerated */
.good {
  transform: translateX(100px);
  opacity: 0.5;
}

/* Avoid: Triggers layout/paint */
.avoid {
  left: 100px;
  background-color: red;
}

Will-Change Property

css
/* Hint browser about upcoming animations */
.will-animate {
  will-change: transform, opacity;
}

/* Remove after animation */
.animated {
  will-change: auto;
}

Reduce Motion

css
/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Animation Libraries

Popular Libraries

  • Framer Motion: React animation library
  • GSAP: Professional-grade animation platform
  • Anime.js: Lightweight JavaScript animation library
  • Lottie: JSON-based animations from After Effects
  • React Spring: Spring-physics based animations

Tailwind CSS Animations

html
<!-- Built-in utilities -->
<div class="animate-spin">Loading...</div>
<div class="animate-ping">Notification</div>
<div class="animate-pulse">Loading</div>
<div class="animate-bounce">Scroll down</div>

Best Practices

  • Keep animations subtle and purposeful
  • Use 60fps animations (avoid jank)
  • Animate transform and opacity for best performance
  • Provide reduced motion alternatives
  • Don't animate too many elements at once
  • Use appropriate duration (200-500ms for most UI)
  • Test on slower devices
  • Avoid animating layout properties (width, height, margin)

Common Use Cases

  • Loading states: Spinners, skeleton screens
  • Page transitions: Fade in/out, slide
  • Hover effects: Scale, lift, color change
  • Notifications: Slide in, shake
  • Form validation: Shake on error
  • Scrolling effects: Parallax, fade on scroll
  • Micro-interactions: Button press, checkbox check

Learn More