Transitions & Animations

🎨 CSS Motion Lesson 11 Intermediate

Motion brings interfaces to life. CSS transitions handle simple state changes smoothly, while @keyframes animations give you complete control over multi-step sequences.

1 Transitions

CSS — Transitions

.btn {
  background: #2563eb;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;

  /* transition: property duration easing delay */
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
}

2 @keyframes Animations

CSS — Keyframe Animations

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

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

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

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

3 Easing Functions

CSS — Timing Functions

transition-timing-function: ease;           /* default */
transition-timing-function: linear;         /* constant speed */
transition-timing-function: ease-in;        /* slow start */
transition-timing-function: ease-out;       /* slow end */
transition-timing-function: ease-in-out;    /* slow both ends */
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* spring */

4 Code Challenge

Challenge: Build a button with a smooth hover effect that lifts it with translateY(-3px) and adds a colored box shadow. Add a pulsing glow animation using @keyframes.