Lesson 4: Animations & Transitions

Using CSS Transitions

Transitions let you animate changes to CSS properties when they occur (e.g., on hover). Use transition to define duration, timing-function, and which properties should animate.

button {
  background: var(--clr-primary);
  color: var(--clr-white);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  transition: background 0.3s ease, transform 0.2s ease;
}

button:hover {
  background: var(--clr-secondary);
  transform: translateY(-2px);
}

Key Transition Properties

• transition-property — which properties to animate.
• transition-duration — how long the animation lasts.
• transition-timing-function — easing (ease, linear, ease-in-out, etc.).
• transition-delay — delay before the animation starts.

Creating Keyframe Animations

For more complex sequences, define @keyframes and use animation shorthand to specify name, duration, timing, and iteration.

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeInUp 0.6s ease-out both;
}

Key Animation Properties

• animation-name — the keyframes identifier.
• animation-duration — total time of one cycle.
• animation-timing-function — easing curve.
• animation-iteration-count — number of times to repeat.
• animation-fill-mode — how styles are applied before/after.