Category: 6. CSS Animations & Transitions

You can control how fast transitions occur using duration and timing functions:

• linear
• ease
• ease-in
• ease-out
• ease-in-out

Example:

div {
  transition: all 1s ease-in-out;
}

Practice Task:
Test different timing functions on a box and observe how the animation feels.

CSS transitions make changes happen smoothly instead of instantly.

Basic syntax:

selector {
  transition: property duration timing-function delay;
}

Example:

<style>
button {
  background: coral;
  color: white;
  padding: 10px 20px;
  transition: background 0.3s ease;
}
button:hover {
  background: darkred;
}
</style>

<button>Hover Me</button>

Practice Task:
Create a button that smoothly changes size and background color on hover.

Combine everything you’ve learned to create a full responsive homepage layout:

• Header with navigation (Flexbox)
• Hero section with centered text (Flexbox or Grid)
• Three-column features section (Grid)
• Responsive footer

This project will help you practice real-world layout building.