Web animation has come a long way and, these days, with the ability to animate elements using CSS3, it’s easier than ever to spice up the user experience with some CSS transitions, CSS transforms and CSS animations. Done right, animation can improve the user experience. It can influence behavior, communicate status, guide the users attention, add affordances, and help the user see the results of their actions. So in this post we`ve collected 40 CSS text & animation examples that will inspire you to create fine and functional animations.

Handwritting Text Animation

Terminal

Smoky

Peeled Text Transforms

CSS Paper Text

LOVE

Colorful

Rotating text

Auto Typing

Text Transform

Transmission: Glowing Text Animation

Emblem – Auto generate circular text

CSS Perspective Text Hover

Simple

Title

Image revealing from text on hover

Glitch text with image background

Animated highlighted text

Fly in, fly out

Floating Text

Text Animation with background

VelocityJS demo

Particles write text

Animated text fill

Neon Text Effect

motion graphic typeface

Animated Type Loader

Material Card with Animated Featured Image

Fully Responsive Layout With Nice Animation

Zoom + pan the image on hover & mouse move

Shattering Images

Building Images

Image Overlay Slider

Image hover effect

#1566

Fluid twisting image 3D – Drag over to twist the image

Image with rotating title on hover

Glitchin` Image

Split

Zoom and Blur background Image