Adding text effect animation is a great way to make it more unique and interesting and can add a fun element to your site. With text animation you can also make users stay on your website longer as catchy and interactive websites work better than boring and static ones. So in this post we`ve gathered 37 Text Effect Animations Made with CSS & Javascript for anyone who`s looking to add text animations to websites.

Simple CSS text animation

Demo

Typing text transition

Demo

Letter Animation

Demo

Shattering Text Animation

Demo

Title Text Animation

Demo

Repellers

Demo

Colorful text animation

Demo

Grassy Text with Variable fonts.

Demo

[webkit] Animated “text-shadow” pattern

Demo

Netflix style text animation with CSS

Demo

CSS Perspective Text Hover

Demo

Text transform and blur

Demo

404 particle text

Demo

Glitch text with image background

Demo

Animated wave clipped by text

Demo

Random Text Shuffle

Demo

Text as background

Demo

Single element, multi coloured 3d text effect

Demo

SVG Text Animation Using Stroke Offset Method

Demo

Corrupted, Grungy, Retro Text and CRT Effect

Demo

Only CSS: Text Patch Work

Demo

Awesome Text-Shadow

Demo

Auto Typing Text (function)

Demo

Physical Typography – Resonate 2014

Demo

CSS-only shimmering neon text

Demo

Anime.js logo animation

Demo

CSS3 Text Animation Effect

Demo

Typewriter animation pure CSS

Demo

GSAP Text Animation

Demo

Animated writing font (SVG paths)

Demo

Landing Animation for BBAE

Demo

Responsive Parallax Drag-slider With Transparent Letters

Demo

Loading

Demo

Mask animation with GSAP & SVG

Demo

Star Wars opening crawl from 1977

Demo

THREE Text Animation #1

Demo

80s Typography

Demo