10 Multimedia · 2026
Week 9 · Lesson 17

CSS Transitions and Animations

Week 9 · 75 minutes · Year 10 Industrial Technology — Multimedia

IND5-2IND5-3IND5-9

Learning intentions

  • I can add smooth hover transitions to buttons and links.
  • I can create a simple keyframe animation.
  • I can respect users' motion preferences.

Success criteria

  • My buttons and cards have smooth hover transitions.
  • My portfolio has at least one subtle keyframe animation.
  • My CSS includes a prefers-reduced-motion override.

Do Now · 5 min

Hover over a button on YouTube. It changes colour — but smoothly, over ~200ms. That "smoothness" is a transition.

Good transitions: they feel natural, not distracting. They reward hovering without stealing attention.

I Do · ~10 min Teacher demonstration

Teacher demonstrates transition basics:

.btn {
  background: #1f3a68;
  color: white;
  padding: 0.8rem 1.5rem;
  transition: all 0.2s ease;  /* the magic line */
}
.btn:hover {
  background: #2e5b9e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

And keyframe animations:

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

.hero h1 {
  animation: fadeInUp 0.8s ease-out;
}
Accessibility consideration: some people get motion sickness from animations. Always add a respect clause: 
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01s !important; transition: none !important; }
}

We Do · ~15 min Guided build

Together, add 3 transitions:

  1. Hover a card - slight lift (translateY) and shadow
  2. Hover a nav link - underline appears smoothly
  3. Page load - hero fades in from below

You Do · ~35 min Independent practice

Polish your portfolio with interactions:

  1. Add transition: all 0.2s ease; to your cards, buttons, and nav links
  2. Add meaningful hover states (colour change, lift, shadow)
  3. Create one keyframe animation for your hero or profile photo (fade, slide, subtle scale)
  4. Add the prefers-reduced-motion override
  5. Record a short screen recording showing interactions — upload to Classroom

Differentiation

Support

3 transition recipes provided (button, card, link). Student pastes and adjusts values.

Core

Build transitions from scratch.

Extension

Use @keyframes to create a subtle looping animation (e.g. a gentle floating effect on an icon) that respects reduced-motion.

Exit Ticket · 5 min

Exit ticket

1. What property adds smooth CSS transitions? ___________

2. What does @media (prefers-reduced-motion) check?

____________________________________________________

3. Your favourite interaction on your portfolio:

____________________________________________________

Resources for this lesson

📚 Deeper Reading

External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.