Day 4: Transitions, Transforms & Animations

Daily Objective

Bring pages to life with smooth transitions, 2D transforms, and keyframe animations.

1. Transitions & Transforms

.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
}

2. Keyframe Animations

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

.hero-title {
  animation: fadeIn 0.8s ease-out forwards;
}

Daily Hands-on Practice (70%)

1. Add smooth hover elevation transitions to all cards and buttons.
2. Build an animated loading spinner or pulse effect using @keyframes.