Baseframe field notes

How to choose a CSS animation duration

A duration is a starting point, not a rule. A tiny button response and a large panel entrance serve different purposes. Start by asking what the movement is helping someone understand.

Begin with the action

For a hover or press response, try 150–200 milliseconds. For a small card entering the page, try 250–400 milliseconds. A larger section reveal might need 400–600 milliseconds. These are our working starting points, not accessibility thresholds or guarantees. Shorten them when a repeated interaction starts to feel sluggish.

Keep the interface usable while an entrance runs. Someone should be able to activate a visible link immediately. Avoid blocking input until a decorative sequence completes.

Distance and easing change the feeling

Moving a card 12 pixels takes less visual explanation than sliding it across the viewport. Use the smallest distance that communicates the change. Try an easing curve that slows near the end so the card settles into its final position.

.card {
  animation: enter 320ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

Compare, rather than endlessly tweaking

Use the free playground to compare two durations for the same movement. Keep distance and easing the same. Then try the result inside the actual page, with its real copy, images, and loading behavior. An isolated animation can feel smooth while a page full of staggered animations feels slow.

Check the interaction using a keyboard and on a touch device. If the motion communicates a status change, provide the same information in text. Do not rely on a moving shape to be the only indication that a save completed.

Know when to remove it

Repeat the interaction several times. If you find yourself waiting for the flourish, shorten it or remove it. A good default is subtle movement for the first transition and immediate responses for frequently repeated actions.

Read the MDN animation-duration reference for syntax, and our reduced-motion note for a fallback that keeps content visible.