Text color change animation css codepen

It’s just crazy, the CSS & JS text effects you can do these days. From glitch effects to blending modes, every time I think I’ve seen it all, some creative coder comes along and makes something on CodePen that leaves me wondering “How the heck does that work?”.

Needing to make some CSS animations for menus, loaders, I decided to also put together a list of impressive CSS text effects that you can only find on CodePen. Enjoy!

This is so not what a neon sign looks like, but I stumbled on the effect on accident and thought it looked cool.

Particle Text Effect

A neat exploding particle text effect using JS and CSS.

Animated Text Fill With SVG Text

A cool SVG text effect that resembles worms moving on letters and changing colors.

CSS-Only Glitch Effect

Glitch sort of tect effect with CSS animation.

Vertically Rotating Text With CSS

I've changed the font to Montserrat and added CSS3 browser prefixes so the animation works right out of the box across browsers.

VHS Text Effect

This neat retro VHS text effect was coded using CSS and Javascript.

See the Pen VHS Text Effect by Shorina (@Shorina) on CodePen.

“Animated Text-Shadow Pattern”

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

Peeled Text Transforms

This pen shows text that looks like it is peeled of the page. It has a smooth animation when hovered. For accessibility reasons, I've added an `aria-label` to the paragraph.

Animating SVG Text

A simple SVG intro text effect perfect for landing pages.

Variable Longshadow Text Effect With Gradients Mixin

Variable long shadow text effect using only CSS gradients mixin.

Text Color Draw

Path drawing of text using greensock's drawSVG plugin.

See the Pen Text Color Draw by cjgammon (@cjgammon) on CodePen.

Pure CSS Text Animation

Neat slide and fade in text effect using pure CSS animation.

Rotating CSS Text Effect

I really liked what they did with the text over at http://panda.network/ so I thought I'd have a crack at making my own implementation here.

Pretty Shadow Effect

A pretty cute text shadow effect using only CSS.

Glitch Text Effect

A smooth glitch text effect done with some simple CSS animations.

CSS Line Text Effect

My first try at canvas. Didn't turn out as nice as I'd hoped, but whatever.

Glitch Effect

CSS-only glitch text effect that looks awesome.

See the Pen Glitch Effect by cbp (@cbp) on CodePen.

Colorful Text Animation

Animated colorful text effect from left to right.

GSAP Text Animation

A simple text effect using [Greensock] GSAP (https://greensock.com/gsap).

Css Glitched Text by Skew

CSS glitched text effect using skewed angles.

Text-Mask Background Moving on MouseMove – v2

A neat trick using text mask background moving on mouse move.

CSS Animated Highlighted Text

This pen was inspired by webdesignerdepot's new design, the title on each article will be highlighted when user hovered it.

Text Animation: Montserrat

Text animation inspired by Web Designer issue 241.

CSS Perspective Text Hover

An experiment using webfonts in combination with CSS 3D transform tools.

Happy Text Effect

An awesome wave text effect using CSS animation.

Glitchy Text

A well-made glitched text animation.

See the Pen Glitchy Text by mattstvartak (@mattstvartak) on CodePen.

SVG Path Animated Text

A cool SVG text effect that looks like spaghetti forming letters.

Efek Typography Text Neon part 1

Make text design (typography) with neon effect.

CSS Animated Text Fill

Fill your text with animated background images – no Javascript required, Webkit only.

Bubbling Text Effect

A jQuery powered example of how you can create a bubbling effect on a HTML heading. The bubbles appear as though they're coming from behind the text, and then fade out and are removed.

Shattering Text Animation

GSAP text animation. SVG path shattering. Slow motion on hover.

Styling Text With SVG (Second Shadow)

An awesome retro 3D text effect using SVG and CSS.

Animated Text With SnapSVG

Work with this feels like an old good Flash.

CSS Glitched Text

Another well-executed glitch effect on text using CSS and JS.

3D CSS Typography

A lovely and bulky 3D text effect made with CSS. Renders best in Chrome.

Wave Text Effect With SVG Blend Mode

Animated ocean wave effect using SVG blend mode and CSS.

Shaded Text Effect

Shaded Text, a SVG+CSS3 experiment about animated shadows. It isn't optimized for mobile devices… yet.

#Codevember 3D Quote Rotator Effect

Using [GreenSock](http://greensock.com/gsap) and the [SplitText](http://greensock.com/SplitText) plugin to create a 3D text effect for #Codevember #7 day 9.