✨ CSS Animations & Transitions

Bring your websites to life with smooth animations!

🎬 CSS Transitions

Transitions smoothly change CSS properties over time. Perfect for hover effects and simple animations!

📝 Transition Syntax

.button {
  background: blue;
  transition: background 0.3s ease;
}

.button:hover {
  background: red; /* Smoothly changes from blue to red */
}

🎨 Interactive Transition Demo

⚙️ Transition Properties

transition: property duration timing-function delay;

/* Examples: */
transition: all 0.3s ease;
transition: background 1s linear 0.5s;
transition: transform 0.5s ease-in-out;

Timing Functions:

• ease - Slow start, fast middle, slow end (default)
• linear - Same speed throughout
• ease-in - Slow start
• ease-out - Slow end
• ease-in-out - Slow start and end

🎨 Button Hover Effects

🎭 CSS Animations

Animations using @keyframes allow complex, multi-step animations that loop!

📝 Animation Syntax

/* Define the animation */
@keyframes slide {
  from { left: 0; }
  to { left: 300px; }
}

/* Use the animation */
.box {
  animation: slide 2s ease infinite;
}

🎨 Bouncing Ball Animation

🔄 Loading Spinner

🎨 Sliding Text Animation

🔄 Transform Property

Transform changes an element's shape, size, position, or rotation:

transform: translate(50px, 100px); /* Move */
transform: rotate(45deg);          /* Rotate */
transform: scale(1.5);             /* Make bigger */
transform: skew(10deg);            /* Slant */

/* Combine multiple transforms */
transform: translate(50px, 0) rotate(45deg) scale(1.2);

✏️ Practice Exercise

Challenge: Create Your Animations!

Make a button that grows on hover using transition
Create a rotating loading spinner with @keyframes
Build a sliding menu animation
Animate text fading in from bottom to top

🎯 Key Takeaways

✅ Transitions: Smooth changes between two states
✅ Animations: Complex multi-step animations with @keyframes
✅ Transform: Change position, size, rotation, skew
✅ Timing functions control animation speed (ease, linear, etc.)
✅ animation-delay staggers multiple animations
✅ Use animations to enhance user experience!

📚 Class 8 - Advanced CSS • Animate Everything! 🚀