Table of Contents

Collection of hand-picked free HTML and CSS text animation code examples.

TEXT ANIMATION

Text animation in HTML, CSS and JS.Made with HTML / CSS / JavaScript by  Keny Zachelin.

See the Pen Text Animation #4 – Smooth fade-in by Keny Zachelin (@kazed972) on CodePen.

demo and code

SHINING TEXT ANIMATION EFFECTS

Shining text animation effect in HTML and CSS.Made with HTML / CSS by FrankieDoodie

See the Pen Shining Text Animation Effects by FrankieDoodie (@FrankieDoodie) on CodePen.

demo and code

ANIMATED TEXT GRADIENT

Pure CSS animated text gradient.Made with HTML / CSS by chrishodges

See the Pen Animated Text Gradient by chrishodges (@chrishodges27) on CodePen.

demo and code

HANDWRITING ANIMATION

Made with HTML / CSS by Marina

See the Pen Handwriting Animation (SVG + CSS) by Marina (@marinamcpeak) on CodePen.

demo and code

PURE CSS TEXT ANIMATION

Made with HTML / CSS by Arlina Design

See the Pen Pure CSS Text Animation by Arlina Design (@arlinadesign) on CodePen.

demo and code

MASKING PATH ANIMATION

Sometimes simple is just as effective as complex. I’m a huge fan of typography and in this example by Steven Sinatra an SVG mask is used to help isolate the text and animate it in place. A fun approach that can be used for those well-known hero sections.

See the Pen Masking Path Animation by Envato Tuts+ (@tutsplus) on CodePen.

demo and code

CSS ONLY FROZEN TEXT

CSS only animated frozen text effect with background-clip, mix-blend-mode and gradient text. JS is to make the text editable for demo purpose, not required for the effect.

See the Pen CSS only Frozen text by Mandy Michael (@mandymichael) on CodePen.

demo and code

HTML, CSS AND JS LETTER ANIMATION

Animating letters with CSS.

See the Pen Letter Animation by Florin Pop (@FlorinPop17) on CodePen.

demo and code

CSS TEXT REVEALING ANIMATION

Very clean CSS3 text revealing animation.

See the Pen CSS TEXT REVEALING ANIMATION by Nooray Yemon (@yemon) on CodePen.

demo and code

SVG VIDEO MASK ON TEXT

Made with HTML / CSS (SCSS) by Simon Evans

See the Pen SVG video mask on text by Simon Evans (@SimonEvans) on CodePen.

demo and code

TEXT SHADOW ANIMATE

Made with HTML / CSS (SCSS) by Wyatt Nolen


demo and code

TEXT EFFECT

Cool animated text effect.Made with HTML / CSS Hakkam Abdullah.

See the Pen (cool) text effect by Hakkam Abdullah (@Moslim) on CodePen.

demo and code

ANIMATED WAVE CLIPPED BY TEXT

Animated wave inside text with SVG. Image in the background and gradient filling the wave.Made with HTML / CSS by web-tiki

See the Pen Animated wave clipped by text by web-tiki (@web-tiki) on CodePen.

demo and code

PURE CSS TEXT ANIMATION

Text animation in HTML and CSS.Made with HTML / CSS (SCSS) by Robin Treur

See the Pen Pure CSS Text Animation by Robin Treur (@RobinTreur) on CodePen.

demo and code

IMPOSSIBLY TIPSY

Made with HTML / CSS by James Mellers

See the Pen Impossibly Tipsy by James Mellers (@jamesmellers) on CodePen.

demo and code

TEXT ANIMATION: MONTSERRAT

Made with HTML / CSS by Claire Larsen

See the Pen Text Animation: Montserrat by Claire Larsen (@ClaireLarsen) on CodePen.

demo and code

WAVE TEXT EFFECT

Wave text effect with SVG/blend mode.Made with HTML / CSS (Stylus) by Lucas Bebber

See the Pen Wave text effect (with SVG/blend mode) by Lucas Bebber (@lbebber) on CodePen.

demo and code

CSS ONLY RANDOM TEXT TRANSFORM

Generate random text transformation using CSS only. Made with HTML (Pug) / CSS (SCSS) by lefoy

See the Pen CSS Only Random Text Transform (Animated) by lefoy (@lefoy) on CodePen.

demo and code

ANIMATED TEXT

Animated text fill with SVG.Made with HTML (Pug) / CSS (SCSS) by Cesar C

See the Pen Animated text fill with svg text practice by Cesar C. (@cesar2535) on CodePen.

demo and code

ANIMATED TEXT-SHADOW PATTERN

Uses background-clip: text & linear-gradient to simulate striped text shadow.Made with HTML / CSS by carpe numidium

See the Pen [webkit] Animated "text-shadow" pattern by carpe numidium (@carpenumidium) on CodePen.

demo and code

SMOKY TEXT

Combining text-shadow and CSS transforms (especially skew) for a smoky (or smokey?) effect.Made with HTML / CSS (SCSS) by Bennett Feely

See the Pen Smoky Text by Bennett Feely (@bennettfeely) on CodePen.

demo and code

ANIMATED TEXT FILL

Fill your text with animated background images – no JavaScript required Made with HTML / CSS (SCSS) by Daniel Riemer

See the Pen Animated text fill by Daniel Riemer (@zitrusfrisch) on CodePen.

demo and code

 

Categorized in:

HTML,

Tagged in:

, , , , , , , ,