Logo Reveal Animation CSS

How the Logo Reveal works

A logo reveal is a single entrance for a wordmark. The name appears once, with a little ceremony, then sits still for the rest of the visit. Done well it makes a landing page, a portfolio or a video title card feel finished. Done badly it delays the one thing the visitor came to see. This generator writes the CSS for the tasteful version: one animation, one direction, and a resting state that is plain, readable text.

How the logo reveal animation CSS works

The generated code puts the starting state on the element itself, such as opacity: 0 and a small offset, and uses a @keyframes reveal block with only a to step. Because there is no from step, the browser animates from whatever the element currently looks like to the final state. animation-fill-mode: forwards, the last word in the animation shorthand, keeps it there when the animation ends. The wordmark is hidden from the first paint, so there is no flash of the finished logo before the effect starts.

Each reveal animates a different property:

Opacity, transform and clip-path are cheap for the browser to animate. The blur filter costs more, especially on a large heading on a low-end phone, so keep Blur in for sizes you have tested.

Timing and easing

The three easing options are cubic-bezier curves:

• Smooth is cubic-bezier(0.2, 0.7, 0.2, 1), a gentle ease-out. Safe default.
• Snappy is cubic-bezier(0.77, 0, 0.18, 1), slow at both ends and fast in the middle. It feels deliberate and editorial.
• Overshoot is cubic-bezier(0.34, 1.56, 0.64, 1). The second value above 1 pushes the element past its final position before it settles back, which pairs well with Scale in.

Material Design and Apple's guidelines both put most interface motion between about 200 and 500 ms. A logo reveal can take a little longer because it happens once, but beyond about a second it starts to feel like a loading screen. Start delay waits after load so the reveal is not competing with images and fonts popping in; 100 to 300 ms is usually enough.

For Letter stagger, the whole effect lasts delay + (letters − 1) × stagger + duration. An eight-letter name at 50 ms stagger and 700 ms duration finishes 1,050 ms after the delay. A twenty-letter name at the same settings takes 1,650 ms, so cut the stagger for long names or the last letters arrive after the visitor has already looked away.

Reading the generated code

The output has two parts. The HTML is an <h1 class="logo">, with one <span> per character for Letter stagger. Each span carries a custom property, --i, holding its index. The CSS uses it in animation-delay: calc(delay + var(--i) * stagger), so there is one rule for every letter rather than a rule per span. The .logo block also carries your font, weight, size, letter spacing and colour. Copy both parts; the background colour is only for the preview.

Pitfalls

• One h1 per page. The snippet uses an h1 because a standalone reveal is usually the page title. If the logo sits in a header above a real page heading, change it to a div or a p so the document outline stays correct.
• Accessibility of split letters. Some screen readers announce one span at a time, so a stagger can be read out letter by letter. Add aria-label="Your Brand" to the heading and aria-hidden="true" to the spans.
• Reduced motion. Wrap the animation lines in @media (prefers-reduced-motion: no-preference) so visitors who have asked their system for less motion see the logo at rest straight away. The starting state (opacity 0) must move inside that query too, or the logo will never appear for them.
• Emoji and accented letters. Splitting by character can break emoji and combining accents into separate pieces. Keep emoji out of a staggered wordmark.
• Web fonts. If the brand font loads late, the reveal may play in the fallback font and then swap. Preload the font, or add a longer start delay.
• Contrast. A pale grey name on white looks elegant in a mockup and fails in daylight. Check the pair with the contrast checker and the guide to colour contrast that passes WCAG.

Going further

To animate a whole line of copy rather than a wordmark, the text animation generator has more effects. The easing comparison plays the curves side by side, and the cubic-bezier editor lets you shape your own. For multi-step motion, build it in the keyframe timeline editor. If your logo is an SVG outline rather than text, the SVG path draw animation traces it stroke by stroke.

Related tools