CSS animation

A CSS animation makes an element change its styles over time, following a set of keyframes, to create motion such as fades, slides, pulses or loops. It runs directly in the browser without JavaScript, which makes it lightweight and smooth for interface effects.

Keyframes and the animation properties

An animation has two parts: a @keyframes rule that describes the styles at points from 0% to 100%, and an animation declaration that plays them on the element.

• @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
• animation: fade 300ms ease-in-out;
• Sub-properties: animation-duration, -timing-function, -delay, -iteration-count, -direction, -fill-mode.

Animation versus transition

Both add motion, but they are triggered and shaped differently.

Timing, iteration and fill

Beyond duration, a few properties shape how an animation feels. animation-iteration-count: infinite loops it, animation-direction: alternate plays it back and forth, and animation-fill-mode: forwards keeps the final state after it ends. The timing function (ease, linear, a custom cubic-bezier, or steps() for frame-by-frame) controls the pace.

Performance and accessibility

Animating transform and opacity is smooth because the browser can offload them to the GPU, while animating layout properties like width or top can cause jank. For accessibility, respect the prefers-reduced-motion setting so users who are sensitive to motion get a calmer experience.

CSS, JavaScript, Lottie or Rive

Use CSS for simple, decorative motion. Reach for JavaScript or a library like GSAP when you need complex sequencing or interactivity. For rich, designer-made vector animation, export from tools like Lottie or Rive and drop it into the page, keeping the CSS layer light.

CSS animation at BeBranded

At BeBranded we use motion with intent: subtle, performant animations that guide attention without slowing the page. For richer motion we combine CSS with tools like Lottie or Rive, as part of our design work.