OneTaskBy Tim King · Updated
CSS Text Animation Generator
Typewriter, Wipe Reveal and Staggered Letter or Word Entrances With Timing Controls
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Text Animation works
This CSS text animation generator animates headlines in several styles. Type a headline and watch it arrive on screen letter by letter, word by word, typed out with a blinking caret, or wiped in from the left. Adjust how long each piece takes and the gap between them, then copy the HTML and CSS. Everything runs on plain CSS animation with no script, so it drops into any page and keeps working if JavaScript is off.
CSS text animation generator: letters, words and lines
Most text entrances are the same trick: wrap each letter or word in its own span, give every
span the same animation, and offset the start of each one a little later than the last. The
generator does this with a custom property. Each span carries --i, its position in the
sequence, and the stylesheet sets animation-delay: calc(var(--i) * 60ms). That means one rule
covers any length of text; you never have to write :nth-child delays by hand, and you can
change the stagger in one place.
Duration is how long each individual piece takes to complete its move. Stagger is the gap between one piece starting and the next. Short staggers with a long duration give a smooth wave where many letters are mid-motion at once; a long stagger with a short duration reads as a sequence of distinct arrivals. For a headline of ten to twenty letters, 40 to 80 milliseconds of stagger is usually the sweet spot. Word effects need a bigger stagger, around 120 to 200, because there are fewer pieces and each one carries more weight.
The letter effects lift, fade or drop each glyph; spaces are kept as non-breaking spaces so the
gaps between words survive being wrapped. The word effects work on whole words, and Flip in
words rotates each one on its horizontal axis, which needs the perspective set on the parent
to look three-dimensional.
Typewriter does not split anything. The paragraph starts at zero width, and a steps()
animation grows it one character at a time to a width of n ch, where n is the character
count. The ch unit is the width of the digit zero, so this is exact only in monospace fonts;
in a proportional font the reveal still works but will run slightly fast or slow across the
line. A second animation blinks the right border as a caret. Wipe reveal animates
clip-path: inset() from fully hidden on the right to fully shown, which is a cheap
compositor-friendly way to get a mask reveal without an extra element.
Set Playback to Loop while you tune the timing, and switch back to Play once for the code you ship; looped headline animations quickly become distracting. The preview replays from the start every time you change a value so you can see the entrance again without reloading.
FAQ
Why does the typewriter run ahead of the text?
The width is in ch units, which equal the width of the digit zero. In a proportional font
letters are narrower or wider than that, so the reveal drifts. Use a monospace font for an
exact typewriter, or accept the slight mismatch.
Can I animate more than one line?
The letter and word effects wrap naturally, so a multi-line headline works. The typewriter cannot, because it animates width on a single line; split long copy into separate paragraphs with staggered delays.
Does it work with screen readers?
The letter effects split the text into spans, which most screen readers read as one word but
some spell out. Add aria-label with the full headline to the container to be sure.
How do I replay the animation on demand?
Remove the animated element's class and add it back on the next frame, or clone and replace the element. CSS animations only run when the element is first styled.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Easing Comparison
Run two CSS easings side by side and copy the winner.
Keyframe Animator
Build and preview a CSS @keyframes animation from three stops.
CSS Text Shadow Generator
Visual text-shadow builder with drop, long, neon and outline presets.
Fluid Typography Generator
A full fluid type scale of clamp() custom properties with a live specimen.
Animated Banner
Design an animated ad banner and export GIF or WebM.