Text effects where each letter animates differently are captivating. Typically, staggered animations use heavyweight JavaScript libraries for minimal design effects. This article examines how to create an appealing text animation using only CSS, without JavaScript (requiring manual character-splitting).
Currently, full support for these features is only available in Chrome and Edge.
Hover over the text in the demo below to see it in action:
Interesting, right? We achieve a vivid elastic effect with pure CSS. It’s adaptable and simple to modify. Before diving into the code, an important note: while this effect is appealing, it has several limitations.
Important Disclaimer About Accessibility
This effect involves splitting words into letters, generally an unfavorable approach.
A simple link contains a word like this:
<a href="#">About</a>Code language: HTML, XML (xml)To target individual letters, we do this:
<a href="#">
<span>A</span><span>b</span</