Text animations can really bring your web pages to life, making them more engaging and visually appealing. With CSS, you can create a wide range of effects, from subtle transitions to bold, eye-catching animations. Whether you want to highlight headlines, add a bit of personality to your landing page, or just make your site more interactive, CSS text animations provide endless creative options.
In our September 2024 update, we’ve explored top sources like CodePen and GitHub to gather 22 fresh and exciting text animation ideas.
Get ready to spice up your web content with these captivating CSS text animations!
CSS Only Marquee with Slow on Hover
Each marquee can have a different animation duration based on its character count. Hovering over a marquee also pauses it for better accessibility.
Perspective is a Matter of Perception
This code animates text with a 3D perspective effect. It creates a visually interesting composition with three phrases.
Bendy Text
This code snippet goes beyond basic text manipulation, using a combination of animation techniques, masking, and layering to create a unique 3D text effect.
A Gooey Marquee
The text scrolls within a marquee container. A unique feature is the use of two text layers. One layer is blurred with a special background that creates the “gooey” look. The other layer sits on top, clear and readable. Both layers share the same scrolling animation. This way, the text maintains readability while the blurred layer creates a cool visual effect. The animation continuously scrolls the text from right to left.
Adjustable Text Emphasis with CSS lh Unit
It is animated text with a user-controlled background. The animation slowly rotates the gradient colors, creating a fluid and colorful backdrop for the text.
CSS Text Handwriting Animation
This code animates a colorful SVG logo. The main lines draw themselves first, then a dot bounces in, and finally smaller lines appear at the bottom.
Breathe Animation – Variable Font
It uses a special type of font called a “variable font” that allows for more control over its appearance. The animation works by changing the weight of the font throughout time. At the beginning and end, the font is lighter. In the middle, it becomes bolder. This change in weight creates the illusion of the text pulsating, like it’s inhaling and exhaling.
Nabla Color Font
Each letter is a separate element. The animation moves the letters slightly on the screen to create a 3D illusion. It also changes a property of the font itself to make it look deeper. The animation is clever because it starts with the first letter and then moves to the next, creating a wave effect like the letters are coming alive one by one.
Text Animation Inspired by Apple Event
The animation makes the text blocks grow really big, blur slightly, and then fade away. It also rotates them just a tiny bit. The coolest part is that the animations are staggered. This means that they don’t all start at the same time. Instead, one block finishes its animation and then the next one starts. This creates a wave effect where the text blocks come alive one by one. You can easily change the colors and fonts used in this code. You could also change the animation itself to create a different effect.
Pure CSS Pseudo-Randomized Keyboard Pressing Text Effect
This code is neat because the animation is subtle – it doesn’t move the keys down very far. This makes it look more realistic. It’s also cool that the keys seem to press at slightly different times, just like real typing.
CSS Neon Text Animation
The letter “E” flickers on and off quickly, and it also moves and shakes slightly. This makes it look like a flickering neon light.
Game Over ::before & ::after Animated Text
The first style is simpler – the colored background text just sits behind the white text and animates. The second style adds a little more flair. The colored background text also rotates slightly as it changes colors, making it wobble a bit.
Synthetic Text
HTML uses a div container with three paragraphs (<p>) for each material (“Metal”, “Glass”, and “Plastic”). The text for each material is set to a transparent color (color: transparent). A background image for each material is set using background-image and background-clip: text. This makes the text appear to cut out of the image. Animations (metal, glass, and plastic) are applied to create a moving effect for the background images.
Typewriter Effect in Pure CSS
This code creates a cool typewriter animation effect using pure CSS.
Colored Text With CSS Masks
This code is interesting because it uses a special CSS effect called “masking” to create the stripes. It also uses multiple layers of text to create a neat color effect.
The Aurora
The code uses multiple elements with different colors, positioning, and animations to create a layered and dynamic aurora effect. The mix-blend-mode property is used to create a darkened effect between the aurora and the title text, enhancing the visual integration. The aurora-border animation adds a subtle shimmer to the aurora elements by changing their border radius over time.
Letter Spacing Animation
It uses multiple text elements with different animation delays to create a layered effect where the text animations appear one after another. The animation uses changes in letter-spacing and text-indent to create a wave-like gradient effect on the text.
Text Animation Pure CSS
The code uses two sets of text with separate animations (fontGrow and fontGrowReverse), creating a unique visual effect where the text grows in opposite directions. Animation delays are applied to some letters, adding a playful rhythm and dynamism to the animation. It uses CSS variables to define colors, making it easy to adjust the color scheme.
CSS Swing Animation Poem
The code combines rotating stanzas, text-filling effects, and background image movement to create a visually captivating and dynamic poem presentation.
See the Pen CSS3 swing animation poem 9 by Pablo Neruda by Jorge Epuñan (@juanbrujo) on CodePen.
Animated Shiny Gold Text
It combines various text-filling effects, gradients, and shadows to create a rich and visually detailed text presentation. Separate animations for the text shine and flash add dynamism and a sense of movement to the gold text. The use of CSS variables makes it easy to adjust the color scheme of the entire animation.
Slick animation from Schitt’s Creek
Schitt’s Creek is a Canadian sitcom that was aired on 2015 until 2020. The series follows the fall from grace of the spoiled, wealthy Rose family. After their business manager embezzles money from the family business, the family loses its fortune and is forced to relocate to Schitt’s Creek, a small town they once purchased as a joke. Comedy ensues.
