Animations

CSS animations bring elements to life over time: transition smoothly interpolates a property between two states (like a hover), while @keyframes with the animation property defines multi-step sequences that can loop, all without JavaScript.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Transitions are like a light dimmer switch: You set a starting state and an ending state, and the browser smoothly transitions between them. A light switch is instant (on/off), but a dimmer gradually changes brightness — that's what CSS transitions do for properties like colour, size, and position.

Animations are like a movie: You define a sequence of frames (@keyframes) and the browser plays them in order, potentially looping forever. Much more powerful than simple transitions.

Transitions animate the change from one CSS value to another. You define what to animate, how long it takes, and the timing curve .

Transforms change an element's shape, size, position, or rotation without affecting the page layout . They're GPU-accelerated, making them the fastest way to move things on screen.

💡 Pro Tip: You can combine multiple transforms: transform: translateX(50px) rotate(10deg) scale(1.1);

While transitions only go from A to B, @keyframes lets you define any number of steps (A → B → C → D...) and control the timing of each.

Let's build two common real-world patterns — a professionally animated button and a CSS-only loading spinner:

Not all CSS properties animate equally well. For smooth 60fps animations, stick to properties that are handled by the GPU:

💡 Golden Rule: Instead of animating top or left , use transform: translate() . Instead of animating width , use transform: scale() .

You now know how to bring your web pages to life with CSS animations. Key takeaways:

Practice quiz

What does a CSS transition do?

  • Defines a multi-step looping sequence
  • Removes an element from the layout
  • Smoothly interpolates a property between two states, such as on hover
  • Changes the HTML structure

Answer: Smoothly interpolates a property between two states, such as on hover. A transition animates the change from one CSS value to another (A to B), commonly triggered by states like :hover.

In the shorthand 'transition: property duration timing-function delay', which value comes first?

  • the property to animate
  • duration
  • delay
  • timing-function

Answer: the property to animate. The shorthand order is property, duration, timing-function, delay.

What lets you define multi-step animations (A to B to C to D)?

  • transition
  • transform
  • @media
  • @keyframes

Answer: @keyframes. @keyframes defines any number of steps (0% to 100% or from/to), unlike a transition which only goes from one state to another.

Which transform moves an element horizontally and vertically without affecting layout?

  • scale(x, y)
  • translate(x, y)
  • rotate(angle)
  • skew(x, y)

Answer: translate(x, y). translate(x, y) shifts the element; transforms don't affect page layout and are GPU-accelerated.

Which transform function resizes an element, where 1 is normal size?

  • scale()
  • translate()
  • rotate()
  • skew()

Answer: scale(). scale() resizes the element; scale(1.5) makes it 1.5x its size.

Which animation property controls how many times an animation repeats?

  • animation-direction
  • animation-fill-mode
  • animation-iteration-count
  • animation-delay

Answer: animation-iteration-count. animation-iteration-count takes values like 1, 3, or infinite.

What does animation-fill-mode: forwards do?

  • Plays the animation in reverse
  • Keeps the element in its end state after the animation finishes
  • Makes the animation loop forever
  • Delays the animation start

Answer: Keeps the element in its end state after the animation finishes. Without forwards, the element snaps back to its original state when the animation ends; forwards retains the final keyframe.

Which properties animate most smoothly because the GPU handles them?

  • width and height
  • top, left, right and bottom
  • margin and padding
  • transform and opacity

Answer: transform and opacity. transform and opacity (and filter) are GPU-accelerated. Animating width/height or top/left forces layout reflow and causes jank.

Instead of animating the 'left' property to move an element, what should you use for performance?

  • margin-left
  • transform: translate()
  • position: absolute
  • width

Answer: transform: translate(). The golden rule: use transform: translate() instead of top/left, and transform: scale() instead of width/height.

Which media query should you respect to disable animations for users who get motion sickness?

  • @media (prefers-color-scheme: dark)
  • @media (max-width: 600px)
  • @media (prefers-reduced-motion: reduce)
  • @media (hover: none)

Answer: @media (prefers-reduced-motion: reduce). @media (prefers-reduced-motion: reduce) lets you turn off or tone down animations for users who prefer less motion.