CSS Transitions & Animations Basics

1. Welcome and Icebreaker:

• Icebreaker: “What is your favorite animation or effect on a website?”

2. Outline the Session:

• Agenda:
  • CSS transitions
  • Keyframe animations
  • Timing functions
• Learning Outcomes:
  • Use transitions for smooth effects
  • Create simple keyframe animations
• Structure:
  • Theory, live coding, and hands-on practice
  • Interactive Q&A

3. Concept Explanation:

CSS transitions and animations bring web pages to life. Transitions animate changes in CSS properties, while keyframes define complex animations. Timing functions control the speed and style of the animation.

4. Live Coding Demonstration:

Example of transitions and animations:

<style>
.box {
  width: 100px;
  height: 100px;
  background: #ffb3b3;
  transition: background 0.5s;
}
.box:hover {
  background: #b3ffb3;
}
@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
.animated {
  animation: move 2s infinite alternate;
}
</style>
<div class="box animated"></div>

• Step-by-step:
  • Use transition for hover effects.
  • Use @keyframes for custom animations.
• Best Practice: Keep animations subtle and purposeful.
• Common Pitfall: Overusing animations or making them too fast.

5. Tasks:

• Exercise:
  • Create a box that changes color on hover.
  • Add a keyframe animation to move the box.