CSS Transitions & Animations

Transitions: animating between two states

The transition property tells the browser to smoothly animate a change in a CSS property over time, rather than applying it instantly. You specify which property to animate, how long it should take, and optionally a timing function that shapes its speed curve, all directly in CSS. Crucially, transitions require two known states to interpolate between, they animate a property changing from one value to another, which is exactly what happens when JavaScript adds or removes a class that changes, say, an element's opacity or transform.

1.button {2  background: #2d6cdf;3  transform: scale(1);4  transition: transform 0.2s ease, background 0.2s ease;5}67.button:hover {8  transform: scale(1.05);9  background: #1f4fa8;10}

Which properties to animate

Not every property is a good candidate for animation. transform (which covers scale, rotate, and translate) and opacity are the two properties browsers can animate most efficiently, since they don't force the browser to recalculate the page's layout on every frame. Animating properties like width, height, or margin works but can feel less smooth, especially on less powerful devices, because the browser has to recompute the positions of surrounding elements continuously. Where possible, prefer transform: translateX() over changing left or margin-left, and prefer transform: scale() over changing width and height directly.

1.panel {2  transform: translateX(-100%);3  transition: transform 0.3s ease-out;4}56.panel.open {7  transform: translateX(0);8}

Keyframe animations

Transitions only handle a move from one state to another, but sometimes you want a self-contained animation with several steps, like a spinner that rotates continuously or a notification that bounces briefly when it appears. The @keyframes rule lets you define named waypoints, using percentages from 0% to 100% (or the keywords from and to), each specifying property values at that point in the animation. You then apply that animation to an element with the animation property, which controls duration, timing, repeat count, and more, similar in spirit to how transition controls timing for a two-state change.

1@keyframes pulse {2  0% { transform: scale(1); opacity: 1; }3  50% { transform: scale(1.15); opacity: 0.7; }4  100% { transform: scale(1); opacity: 1; }5}67.loading-dot {8  animation: pulse 1.2s ease-in-out infinite;9}

Timing functions and duration

Both transition and animation accept a duration and a timing function that shapes how speed changes over that duration. ease starts slow, speeds up, then slows down again, and is a comfortable default for most interface motion. linear moves at a constant speed, useful for continuous effects like a spinning loader, while ease-in and ease-out start or end slowly, useful for things entering or leaving the screen respectively. Durations for interface feedback are usually short, somewhere between 150 and 400 milliseconds; longer than that starts to feel sluggish rather than smooth, since the goal is to help someone track a change, not to put on a show.

• transition animates a property smoothly between two known states, usually triggered by a class change or hover.
• transform and opacity are the cheapest properties to animate; prefer them over width, height, or margin.
• @keyframes defines a named, multi-step animation, applied to an element with the animation property.
• Short durations (150-400ms) with an ease or ease-out timing function feel responsive rather than sluggish.

Pairing motion with JavaScript

In practice, JavaScript rarely animates anything directly, it just adds or removes classes at the right moments, exactly as you learned in the events chapter, and lets CSS handle the actual motion. This division keeps your JavaScript focused on logic, deciding when something should happen, while CSS stays focused on presentation, deciding what it looks like when it does. As you move into the Level 3 capstone, an interactive quiz app, you'll use this same pairing constantly: JavaScript will check answers and update state, while CSS transitions and animations will make correct and incorrect feedback, progress updates, and question changes feel smooth and satisfying rather than abrupt.