Lesson 14: CSS Animations & Transitions

Welcome to Lesson 14! CSS Animations & Transitions allow you to add dynamic visual effects to your websites. Transitions provide smooth changes between property values, while animations give you complete control over keyframes and timing.

For example, a hover effect with a transition:

button {
  background-color: #28a745;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #218838;
}

This smoothly changes the background color when the button is hovered over.

CSS Animations allow more complex sequences using @keyframes:

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.box {
  animation: slideIn 1s ease forwards;
}

You can control timing, iteration count, delay, and more. Combining animations with JavaScript enables interactive effects triggered by events.

Animations can enhance UX by guiding attention, showing progress, or providing feedback, but should be used judiciously to avoid overwhelming users or hurting performance.

Practice exercises include animating menus, buttons, modals, and content sections using transitions and keyframes. Experimenting with easing functions, delays, and loops helps you understand animation flow.

By the end of this lesson, you should be able to:

• Create smooth hover effects with CSS transitions
• Define keyframe animations for dynamic effects
• Control animation timing, iteration, and delays
• Combine CSS animations with JavaScript events
• Use animations responsibly for a better user experience

The final lesson will guide you on putting everything together into a complete full-stack web project.