CSS keyframe animations without a library
CSS can animate elements on its own: fade a notice in, slide a menu up, shake an input that has an error, spin a loading icon. A @keyframes rule describes the stages of the motion, and the animation property attaches it to an element with a duration, timing and repeat count.
Pick one of twelve ready-made animations, tune duration, delay, easing, iterations and fill mode while the preview plays, and copy the complete CSS.
How to use it
- Choose an animation, such as Fade In, Slide Up, Pulse or Shake.
- Set the duration and delay in seconds.
- Choose the easing, the number of iterations or Infinite, and the fill mode.
- Copy the CSS and add the .anim-preview class, renamed to suit your project, to the element you want to animate.
Example: a quick fade-in
Fade In, 0.4 s, ease-out, once, fill both
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.anim-preview {
animation: fadeIn 0.4s ease-out 0s 1 normal both;
}The name in the animation line must match the @keyframes name exactly; a mismatch is the most common reason an animation silently does nothing.
The settings that matter
Duration sets how long one cycle takes. Interface feedback usually feels right between 150 and 400 milliseconds; longer animations start to feel slow. Easing shapes the speed: ease-out starts fast and settles, which suits things that enter the screen, while ease-in suits things that leave. Fill mode both keeps the first frame applied during the delay and the last frame after the end, so a faded-in element does not flash back to invisible.
Animate the cheap properties
Browsers can animate transform and opacity on the graphics card without recalculating the page layout. All the animations here use only those two, which keeps them smooth even on slow phones. Animating width, height, top or margin forces layout work on every frame and is a common cause of stutter.
Respect reduced motion
Some people get dizzy or nauseous from motion on screen and turn on a reduce-motion setting in their operating system. Wrap decorative animations in @media (prefers-reduced-motion: no-preference) { … }, or switch them off inside @media (prefers-reduced-motion: reduce), so those visitors get a calm page. Infinite animations deserve particular care.
Questions
CSS animation or transition?
A transition animates between two states when something changes, such as hover. An animation runs on its own timeline with as many keyframes as you like and can loop.
Can I restart an animation with JavaScript?
Remove the class, force a reflow by reading element.offsetWidth, then add the class again. The Web Animations API offers finer control.
Is anything uploaded?
No. The CSS is generated in your browser.