Post thumbnail: 22 CSS Text Animations

22 CSS Text Animations

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

Related Articles

  1. CSS Text Effects
  2. CSS Text Shadow Effects
  3. CSS Glow Text Effects
  4. CSS 3D Text Effects
  5. CSS Text Glitch Effects

Demo image: Text Animation Text Animation - GIF Demo

Author

  • Keny Zachelin

Links

Made with

  • HTML / CSS / JavaScript

About the code

Text Animation

Text animation in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Shining Text Animation Effects Shining Text Animation Effects - GIF Demo

Author

  • FrankieDoodie

Links

Made with

  • HTML / CSS

About the code

Shining Text Animation Effects

Shining text animation effect in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Text Gradient Animated Text Gradient - GIF Demo

Author

  • chrishodges

Links

Made with

  • HTML / CSS

About the code

Animated Text Gradient

Pure CSS animated text gradient.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Handwriting Animation Handwriting Animation - GIF Demo

Author

  • Marina

Links

Made with

  • HTML / CSS

About the code

Handwriting Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Pure CSS Text Animation Pure CSS Text Animation - GIF Demo

Author

  • Arlina Design

Links

Made with

  • HTML / CSS

About the code

Pure CSS Text Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Masking Path Animation Masking Path Animation - GIF Demo

Author

  • Envato Tuts+

Links

Made with

  • HTML / CSS

About the 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Only Frozen Text

Author

  • Mandy Michael

Links

Made with

  • HTML / CSS (SCSS)

About the 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: HTML, CSS, and JS Letter Animation HTML, CSS, and JS Letter Animation - GIF Demo

Author

  • Florin Pop

Links

Made with

  • HTML / CSS / JavaScript

About the code

HTML, CSS and JS Letter Animation

Animating letters with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Text Revealing Animation CSS Text Revealing Animation - GIF Demo

Author

  • Nooray Yemon

Links

Made with

  • HTML / CSS

About the code

CSS Text Revealing Animation

Very clean CSS3 text revealing animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: SVG Video Mask on Text

Author

  • Simon Evans

Links

Made with

  • HTML / CSS (SCSS)

About the code

SVG Video Mask on Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Text Shadow Animate

Author

  • Wyatt Nolen

Links

Made with

  • HTML / CSS (SCSS)

About the code

Text Shadow Animate

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Text Effect Text Effect - GIF Demo

Author

  • Hakkam Abdullah

Links

Made with

  • HTML / CSS

About the code

Text Effect

Cool animated text effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Wave Clipped by Text Animated Wave Clipped by Text - GIF Demo

Author

  • web-tiki

Links

Made with

  • HTML / CSS

About the code

Animated Wave Clipped by Text

Animated wave inside text with SVG. Image in the background and gradient filling the wave.

Compatible browsers: Chrome, Opera, Safari

Dependencies: -

Demo image: Pure CSS Text Animation Pure CSS Text Animation - GIF Demo

Author

  • Robin Treur

Links

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Text Animation

Text animation in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Impossibly Tipsy

Author

  • James Mellers

Links

Made with

  • HTML / CSS

About the code

Impossibly Tipsy

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Text Animation: Montserrat Text Animation: Montserrat - GIF Demo

Author

  • Claire Larsen

Links

Made with

  • HTML / CSS

About the code

Text Animation: Montserrat

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Wave Text Effect

Author

  • Lucas Bebber

Links

Made with

  • HTML / CSS (Stylus)

About the code

Wave Text Effect

Wave text effect with SVG/blend mode.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Only Random Text Transform CSS Only Random Text Transform - GIF Demo

Author

  • lefoy

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Only Random Text Transform

Generate random text transformation using CSS only.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Text

Author

  • Cesar C.

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Animated Text

Animated text fill with SVG.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated text-shadow Pattern Animated text-shadow Pattern - GIF Demo

Author

  • carpe numidium

Links

Made with

  • HTML / CSS

About the code

Animated text-shadow Pattern

Uses background-clip: text & linear-gradient to simulate striped text shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Smoky Text Smoky Text - GIF Demo

Author

  • Bennett Feely

Links

Made with

  • HTML / CSS (SCSS)

About the code

Smoky Text

Combining text-shadow and CSS transforms (especially skew) for a smoky (or smokey?) effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Text Fill Animated Text Fill - GIF Demo

Author

  • Daniel Riemer

Links

Made with

  • HTML / CSS (SCSS)

About the code

Animated Text Fill

Fill your text with animated background images - no JavaScript required.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

back to top