Elastic Spring Animation: CSS Keyframe Animation

Elastic Spring Animation

Grows with a real spring: it overshoots, wobbles and settles, then springs back down. The easing is linear() with 31 stops sampled from a damped spring; older browsers fall back to a back-out curve.

Also known as: spring animation css, css linear() easing spring, elastic easing css.

Spring

Color Base size 16px Dark background

HTML

<div class="kfa-elastic-spring">Spring</div>

CSS

.kfa-elastic-spring {
  --c: var(--kfa-color, #3b82f6);
  font-size: var(--kfa-size, 16px);
  display: grid;
  place-items: center;
  width: 5.5em;
  height: 5.5em;
  border-radius: 1em;
  background: var(--c);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-weight: 700;
  box-shadow: 0 0.6em 1.4em -0.6em color-mix(in srgb, var(--c) 70%, transparent);
  animation: kfa-elastic-spring-kf 2.8s infinite;
}
/* two timing declarations: browsers without linear() keep the cubic-bezier */
@keyframes kfa-elastic-spring-kf {
  0%, 50% {
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-timing-function: linear(0, 0.106, 0.359, 0.666, 0.951, 1.163, 1.281, 1.308, 1.266, 1.183, 1.088, 1.003, 0.942, 0.91, 0.906, 0.921, 0.948, 0.977, 1.003, 1.02, 1.029, 1.029, 1.023, 1.015, 1.006, 0.998, 0.993, 0.991, 0.991, 0.993, 1);
  }
  0% { transform: scale(1); }
  42%, 50% { transform: scale(1.25); }
  92%, 100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .kfa-elastic-spring, .kfa-elastic-spring *, .kfa-elastic-spring::before, .kfa-elastic-spring::after, .kfa-elastic-spring *::before, .kfa-elastic-spring *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --kfa-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --kfa-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar keyframe animations