CSS Transitions

The transition property animates changes between states. Hover over the boxes to see the effects.

Background Color

Hover

Smooth color transition on hover.

Scale Transform

Hover

Element grows larger on hover.

Rotate Transform

Hover

Element rotates 45 degrees on hover.

Box Shadow

Hover

Shadow expands dramatically on hover.

Opacity

Hover

Element fades to 50% opacity.

Multiple Properties

Hover

Combines transform, shadow, and border-radius.

.box { transition: transform 0.3s ease; }
.box:hover { transform: scale(1.2); }

.multi { transition: transform 0.3s, box-shadow 0.3s, border-radius 0.3s; }
.multi:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}

Timing Functions

Timing functions control the speed curve of animations. Hover over the container to see how each ball moves differently.

Compare Timing Functions

linear

ease

ease-in

ease-out

in-out

Hover to see each timing function in action.

.linear { transition-timing-function: linear; }
.ease { transition-timing-function: ease; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }
.custom { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

@keyframes Animations

Use @keyframes to define complex animations with multiple steps. These animations run continuously.

Pulse

Subtle scaling animation for attention.

Bounce

Vertical bouncing motion.

Shake

Horizontal shake for errors or alerts.

Spin

Continuous 360-degree rotation.

Float

Gentle floating up and down.

Glow

Pulsing glow effect with box-shadow.

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

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

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

.pulse { animation: pulse 2s ease-in-out infinite; }
.bounce { animation: bounce 1s ease-in-out infinite; }
.spin { animation: spin 2s linear infinite; }

Animation Properties

Control animation behavior with properties like animation-delay, animation-direction, and animation-play-state.

animation-delay: 0.5s

Delayed

Animation starts after a 0.5s delay.

animation-direction: reverse

Reverse

Animation plays in reverse direction.

animation-play-state: paused

Hover me

Animation is paused until hover.

.delayed { animation-delay: 0.5s; }
.reverse { animation-direction: reverse; }
.alternate { animation-direction: alternate; }
.paused { animation-play-state: paused; }
.paused:hover { animation-play-state: running; }

/* Shorthand: name duration timing delay iteration direction */
.full { animation: bounce 1s ease-in-out 0.5s infinite alternate; }

Complex Animations

Create more sophisticated effects with multi-step keyframes. Some animations trigger on hover.

Heartbeat

♥

Double-beat like a heartbeat.

Swing

Pendulum-like swinging motion.

Wobble (hover)

Hover

Wobbly jelly-like effect on hover.

3D Flip (hover)

Hover

3D flip animation using perspective.

@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}

@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.swing { animation: swing 1s ease-in-out infinite; transform-origin: top center; }

Loading Animations

Common loading indicators using CSS animations.

Spinner

Classic rotating spinner with border.

Bouncing Dots

Three dots bouncing with staggered delays.

Progress Bar

Animated progress bar filling up.

.spinner {
  width: 3rem;
  height: 3rem;
  border: 4px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.dots span {
  animation: bounce 1.4s ease-in-out infinite;
}
.dots span:nth-child(1) { animation-delay: 0s; }
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }