CSS Animation Snippets — Free HTML CSS JS Pure CSS Keyframe Animations

Most interface motion does not need JavaScript. A keyframe block and a transition handle entrances, loops, hovers and state changes, run on the compositor, and keep working even if a script fails to load. These snippets are that argument in code: animated loaders, entrance effects, hover states, gradients and attention cues built from @keyframes and transition alone.

They stick to transform and opacity — the two properties the browser can animate without a repaint — which is the difference between motion that holds sixty frames a second and motion that stutters on a mid-range phone.

Two mechanisms, two different jobs

A transition interpolates automatically between two states whenever a property actually changes — a hover, a class toggle, a focus — and needs no further code once declared. An animation runs a self-contained @keyframes sequence with as many waypoints as needed, and can loop indefinitely on its own without any state change to trigger it. Anything that repeats, or that needs more than a start and end point, needs @keyframes; anything reacting to a single state change is usually a transition.

Why transform and opacity specifically

The browser's rendering pipeline has three stages that matter here — layout, paint and composite — and transform and opacity are the only two commonly-animated properties that skip the first two entirely, running purely on the compositor thread. Animating width, height, top, left or margin instead forces a layout recalculation on every single frame, which is the direct cause of animation that drops frames on anything but a fast device.

Fill-mode and direction, used on purpose

animation-fill-mode: forwards is what keeps an entrance animation's final state instead of snapping back to its pre-animation values the instant the keyframes finish — a detail that silently breaks a huge fraction of copy-pasted CSS animations. animation-direction: alternate turns a one-way keyframe sequence into a back-and-forth pulse without duplicating a single keyframe, which is how most of the breathing and floating loops in this tag are built.

Motion as an enhancement, not a requirement

Every loop and entrance here is wrapped so it can be disabled outright under @media (prefers-reduced-motion: no-preference) rather than merely slowed down. Slowing an animation down is not sufficient for the subset of users whose vestibular symptoms are triggered by movement itself — for that group, the only correct behaviour is no movement, with the final visible state shown immediately.