Baseframe field notes

When CSS is enough for interface motion

You can build many useful interface animations with CSS. That does not make JavaScript animation a mistake. It means the choice should follow the behavior you need.

Use a transition for a change between states

Hover, focus, expanded, and selected states often need a simple transition. Keep the state in semantic HTML or application logic, then let CSS handle its visual change. A button can move slightly on hover while still working as an ordinary button without the effect.

.action {
  transition: transform 160ms ease-out;
}
.action:hover { transform: translateY(-2px); }
.action:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .action { transition: none; transform: none; }
}

Use keyframes for a short sequence

An entrance that fades and settles through a few positions is a good fit for keyframes. Define the final state outside the animation. If you use a class to trigger it, remove and reapply that class only when a new sequence is intended. Avoid replaying a page-wide entrance every time a component updates.

Use JavaScript when behavior requires it

Drag gestures, interruptible physics, complex timelines, and coordination with application state may benefit from the Web Animations API or a dedicated library. CSS alone cannot decide whether a server saved a record or whether a user completed a gesture. Keep that logic in the application.

When a library saves meaningful engineering effort, evaluate its bundle cost, accessibility approach, maintenance, and interaction model. “No dependencies” is useful only when the simpler implementation actually fits.

Measure the actual page

Animating transform and opacity is often a good starting point, but it is not a universal performance guarantee. Large layers, filters, shadows, and many simultaneous animations can still be expensive. Test on a slower device and inspect the animation alongside the rest of the page.

For practical guidance, see web.dev’s high-performance animation guide. Consult MDN’s Web Animations API documentation when CSS no longer fits the interaction.

The Interface Motion Kit focuses on the simple cases: readable source, ordinary selectors, and small patterns that you can adapt.