CSS keyframes animation generator

Make a CSS animation

/* Fade up. Fades in while rising 32px into place.
   Markup: <div class="fade-up">…</div> */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

.fade-up {
  animation: fade-up 600ms ease-out both;
}

/* Asked for less motion: the same animation as one instant frame, so the
   element ends where it would have and animationend still fires. */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    animation-duration: 0.01ms;
  }
}

Delay, duration, cycles, fill

An animation is a stretch of time. It waits for its animation-delay, then runs animation-iteration-count cycles of animation-duration each, every cycle carrying the element through the keyframes from 0% to 100%, or back, as animation-direction says. Outside those cycles the keyframes do not apply, unless animation-fill-mode holds the first frame through the delay (backwards) or the last one after the end (forwards), as fig. 1 draws.

/* The generator's default: fade up. */
.fade-up {
  animation: fade-up 600ms ease-out both;
}

@keyframes: from, to and the stops between

A keyframes rule lists offsets and what the element looks like at each. from is 0% and to is 100%; any percentage between adds a stop, and several offsets can share one block. A property a keyframe leaves out is carried between the keyframes that do set it, and a missing 0% or 100% falls back to the element’s own style. Here the heartbeat’s rests share one line:

@keyframes heartbeat {
  0%, 24%, 56%, 100% {
    transform: scale(1);
  }
  12% {
    transform: scale(1.12);
  }
  36% {
    transform: scale(1.1);
  }
}

Every effect in the generator animates only transform, opacity and filter, which browsers can usually animate without laying the page out again on every frame. Animating width, top or margin works too, but moves everything around the element each frame. A pivot such as swing’s top edge is set with transform-origin on the element, outside the keyframes.

Run it when it scrolls into view

The same keyframes can follow the scroll instead of a clock. In CSS, animation-timeline: view() ties the animation to where the element is in its scroller and animation-range picks the stretch: the generator plays entrances and attention effects over entry 0% cover 30%, from the moment the element’s top comes in at the bottom to 30% of the way across, and exits over exit 0% exit 100%, as it leaves at the top. The scroll sets the pace, so the duration, delay and count drop out, and scrolling back plays it backwards. It runs in Chrome and Edge 115, Safari 26 and Firefox 159 or later, so it sits inside @supports, where older browsers simply show the element.

svg-scroll-draw does the same in every browser, from one value to another. scrollReveal plays 7 of the 27 effects with its own presets and from (opacity, x, y, scale and rotations, in px and degrees), from when the element’s top passes 88% of the window to 53%, and keeps it once played. scrollAnimate takes the CSS values themselves, so it plays 11 more: blurs, perspective flips, slides by a percentage, and the exits. The other 9 have stops between their two ends, which a from and a to cannot hold; their scroll version is CSS only.

More on the CSS side: the CSS scroll-driven animation generator. More on the library side: the scroll reveal generator.

Reduced motion, built in

Every CSS output carries a prefers-reduced-motion rule. It does not remove the animation: it makes it one instant frame, so the element ends where it would have, an exit still hides it, and any script waiting for animationend still hears it. An infinite loop runs once.

/* Asked for less motion: the same animation as one instant frame, so the
   element ends where it would have and animationend still fires.
   The loop runs once. */
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

CSS animation questions

const el = document.querySelector('.fade-up');

el.classList.remove('fade-up');
void el.offsetWidth; // a forced layout: the browser sees the class gone
el.classList.add('fade-up');

Shape the easing first: the easing visualizer. All of svg-scroll-draw 2.23.3: the docs.