Add purposeful transitions and animations

One idea at a time

Motion can help someone notice a change, but it should not be required to understand a page. A transition fills in intermediate values between an old and a new value, such as blue and green. The computed value is the value the browser resolves after applying CSS rules. Properties such as background-color can change gradually. Hover is one possible trigger; a class change or other state change can trigger it too. The transition belongs on the base rule so entering and leaving the state can both use it.

An animation follows a named sequence of keyframes. It can run when applied or be started by a state change; it does not have to repeat forever. Begin with one short movement. The examples use background color for a button and a small translated marker for keyframes, keeping the label and the document's layout available throughout.

What to remember first

Walk through an example

<button class="action" type="button">Try this state</button>
<p>
  This demonstration button changes appearance; it does not submit
  anything.
</p>

.action {
  background-color: #1e3a8a;
  color: white;
  border: 2px solid transparent;
  padding: 12px 20px;
  transition: background-color 0.3s ease;
}
.action:hover,
.action:focus-visible {
  background-color: #166534;
}
.action:focus-visible {
  outline: 3px solid #0f172a;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .action {
    transition: none;
  }
}

Move the pointer onto the button, or press Tab to focus it. Its surface changes from blue to green while the text stays white. The transition version moves between colors over 0.3 seconds. The keyboard focus ring appears separately. If reduced motion is requested, the color change still happens but the transition is removed.

See it happen: try a small change

.action {
  background-color: #1e3a8a;
  color: white;
  border: 2px solid transparent;
  padding: 12px 20px;
  transition: none;
}
.action:hover,
.action:focus-visible {
  background-color: #166534;
}
.action:focus-visible {
  outline: 3px solid #0f172a;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .action {
    transition: none;
  }
}

Look a little closer

transition-property chooses what changes smoothly; transition-duration gives the time; transition-timing-function controls the pace; transition-delay waits before beginning. You can list multiple transitions separated by commas. Avoid transition: all when only one property matters, because future layout changes could start moving unexpectedly.

For animations, animation-name selects keyframes, animation-duration controls each cycle, animation-delay postpones the start, animation-iteration-count controls repeats, and animation-direction can be normal, reverse, or alternate. transform: translateX() moves the painted box without reflowing neighboring content. It still can overlap other content, so leave room for the movement. This course uses a single short cycle rather than an infinite decorative loop.

Try one short keyframe animation

The marker is a neutral div with a fixed 32px width and height and a blue background. nudge is a name we choose and reuse in animation. Inside @keyframes, 0% means the start, 50% halfway, and 100% the end. translateX moves the painted marker horizontally: it starts at 0, reaches 24px, and returns to 0. animation: nudge 0.6s ease 1 runs one cycle. Select the animated version or reload its preview to replay it. Reduced-motion mode leaves it still.

.marker {
  width: 32px;
  height: 32px;
  background-color: #1e3a8a;
}

Try it in your own project

Copy the button and transition rules. Hover it, then press Tab until the focus ring appears. Enable reduced motion in your operating system’s accessibility settings and compare again. If that setting is unavailable, temporarily put .action { transition: none; } after all rules to compare an instant change; this checks the result, not detection of the preference. Remove that temporary override afterward.

The preview uses a small set of readable starting styles for its font, spacing, and controls. The code to notice shows the lesson's own rules. Your local browser defaults may look different before you add those rules; focus on the relationship being demonstrated rather than matching every pixel of the preview.

A common wrong turn

Hover alone is unavailable to many touch and keyboard users. Keep the base button usable, show keyboard focus, and avoid making essential content appear only during motion. A reduced-motion preference should remove the movement, not the useful state information.

Go to the source

• MDN: Add purposeful transitions and animations ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.