CSS Tip

Elastic/Bouncy Text Effect

Combining modern features such as shape(), sibling-index()/sibling-count(), linear(), etc., to create a funny elastic effect on hover. There is no text duplication, but you need a monospace font and a wrapper per letter.

CSS-only elastic/bouncy effect on hover

<ul>
  <li>
    <a href="#"><span>A</span><span>b</span><span>o</span><span>u</span><span>t</span></a>
  </li>
</ul>
@property --_s {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
ul li a {
  --h: .12em; /* control the elastic effect */
  --g: .15ch; /* the gap between letters */
  
  display: flex;
  gap: var(--g);
  font: bold 40px monospace;
  transition: --_s 1.5s linear(/* see the demo for the full code */);
}
ul li a:hover {
  --_s: 1;
  transition: --_s .3s;
}
ul li a span {
  offset: shape(from .5ch, 
      curve to calc((sibling-count() - 1)*(1ch + var(--g)) + .5ch) 50%
            with 30% calc(50% - var(--_s)*sibling-count()*var(--h))/
                 70% calc(50% - var(--_s)*sibling-count()*var(--h))
    ) calc(99.9%*(sibling-index() - 1)/(sibling-count() - 1));
}

Chrome-only for now:

See the Pen Elastic hover effect by Temani Afif (@t_afif) on CodePen.

A direction-aware version:

See the Pen Direction-aware Elastic hover effect (Chrome only) by Temani Afif (@t_afif) on CodePen.

Before using this on a production website, read this: Barriers from Links with ARIA (TLDR: don't do it)

More CSS Tips