Transforms, Transitions & Animations

transform moves, rotates, scales, or skews an element without changing document flow. Common functions: translate, rotate, scale, skew.

2D Transforms

transform moves, rotates, scales, or skews an element without changing document flow. Common functions: translate, rotate, scale, skew.

Real-life example: transform is like sliding a paper on a desk — it moves visually but the desk space stays the same.

2D transform

.card:hover {
  transform: translateY(-4px) scale(1.02);
}

.icon-spin-hover:hover {
  transform: rotate(12deg);
}

.skew-badge {
  transform: skewX(-6deg);
}

3D Transforms (simple)

3D transforms add perspective and rotateX/rotateY for flip effects. Set perspective on the parent for realistic depth.

Real-life example: rotateY is like turning a playing card to show the back face — flat object with a flip feeling.

Simple 3D flip

.flip-card {
  perspective: 800px;
}

.flip-inner {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

CSS Transitions

Transitions smoothly change CSS properties over time when a state changes (like hover or a class toggle). Specify property, duration, and easing.

Real-life example: transition is like a door closing slowly instead of slamming shut — smooth and pleasant.

Transition examples

.btn {
  background: #0891b2;
  color: white;
  transition: background 0.25s ease, transform 0.2s ease;
}

.btn:hover {
  background: #7c3aed;
  transform: translateY(-2px);
}

CSS Animations (@keyframes)

Animations run automatically or loop using @keyframes. You define start and end styles, then attach the animation to a selector.

Real-life example: @keyframes is like storyboard frames for a cartoon — frame 0%, frame 50%, frame 100% — played as a short film.

Keyframe animation

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

.hero-content {
  animation: fadeInUp 0.7s ease-out both;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.live-dot {
  animation: pulse 1.5s ease-in-out infinite;
}

Respect prefers-reduced-motion

Some users feel dizzy from motion. The prefers-reduced-motion media query lets you turn off or simplify animations for them.

Real-life example: This setting is like offering a calm elevator instead of a roller coaster — same destination, gentler ride.

Use short transitions for buttons and cards. Save big looping animations for special hero moments only.

Accessible motion

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}