Transitions & Keyframes

Give state changes a transition

A transition interpolates a CSS property when its value changes, such as when a pointer enters a button’s :hover state. Write the property, duration and timing function: transition: transform 200ms ease;. The control becomes a little more responsive because the visual change is not an abrupt jump.

.card { transition: transform 200ms ease; }
.card:hover { transform: translateY(-3px); }

In your practical, add one small hover transition. Ensure the element has a clear resting state and that the hover change communicates interaction rather than distracting from content.

Use keyframes for a sequence

A transition needs a change between states. For a named animation with several steps, define @keyframes and select it with the animation property. Percentages mark points in the timeline; the browser interpolates between them. Keep decorative loops subtle and avoid motion that makes reading or focus difficult.

@keyframes gentle-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

This example defines motion only; an element would need an animation declaration to use it.

Prefer transform and opacity

transform and opacity are often smooth to animate because they generally do not force the browser to recalculate the page’s layout on every frame. Changing width or position properties such as top can trigger layout or painting work, especially across many elements. This is a useful performance guideline, not a promise that every animation will be free.

Make motion intentional

Keep durations short for small feedback and use motion only when it clarifies an interaction. Test with a mouse and keyboard focus; hover-only effects should not be the only way to understand a control. Add the reduced-motion preference in your accessibility work so people who request less motion can avoid unnecessary animation. Your quest needs only one transition, but choosing the right property and keeping the effect restrained demonstrates good judgement.

Apply a complete effect to a real control

A keyframes definition alone does not animate anything. It needs an animation declaration, such as animation: gentle-pulse 2s ease-in-out infinite on a chosen element. Use that only as optional practice: the assessment needs one hover transition, not a looping animation.

For a small keyboard-aware rehearsal:

.practice-link { transition: transform 150ms ease; }
.practice-link:hover,
.practice-link:focus-visible { transform: translateY(-2px); }
.practice-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .practice-link { transition: none; }
  .practice-link:hover,
  .practice-link:focus-visible { transform: none; }
}

Use a real anchor or button. The normal rule owns the transition so both entering and leaving the state are smooth. Focus remains visible with reduced motion; disabling animation must not remove the cue telling a keyboard user where they are.

Test the pointer entering and leaving, then Tab to the control and activate it. A touchscreen has no dependable hover state, so essential information must be visible without hovering. Transform changes appearance without reserving extra layout space; keep the movement small enough not to overlap nearby content.

If the effect snaps only on the way back, inspect where transition is declared. If nothing moves, inspect selector matching and any reduced-motion override. Before assessment, show a noticeable but restrained hover change, equivalent focus feedback and a reduced-motion experience that stays usable.