Skip to content
Chapter 06 of 07 · 2 lessons · ~19 min

Motion and Interaction

Bring your pages to life with smooth transitions, keyframe animations, hover effects and pseudo-classes, without slowing them down.

YOUR PROGRESS0%
/ Lessons in this chapter
15
CSS Transitions and Animations How to make smooth transitions and keyframe animations that feel professional and stay fast. Coming soon
16
CSS Hover Effects and Pseudo-Classes How to create hover effects and use pseudo-classes and pseudo-elements to style states and add decoration. Coming soon

Chapter practice task

Task: Add polished hover effects and one entrance animation

  1. Give all your buttons a smooth hover and a visible keyboard focus style.
  2. Add a lift-and-shadow hover to your service cards.
  3. Animate your hero headline so it fades and slides in on page load.
  4. Style your form fields with :focus and :invalid.
  5. Turn off animations for visitors who prefer reduced motion.

By the end of this chapter

  • You can add smooth transitions to any property change
  • You can build keyframe animations and control their timing
  • You can use pseudo-classes and pseudo-elements for hover, focus and decoration

Quick answers for this chapter

Transition or animation?

A transition animates a change (like hover). An animation runs on its own, using keyframes.

Do animations hurt performance?

Not if you animate transform and opacity. Avoid animating width, height and margins.

Do hover effects work on phones?

There’s no real hover on touch screens, so never hide important content behind a hover.