One important factor in website design is the font choice and the style of typography that you select. This can easily be a make-or-break situation. Fonts catch the eye very quickly and can engage the user or push them away, so it’s important to make the right choice.
However, fonts and typography don’t have to be static. You can introduce cool CSS text effects on your website to help you stand out. Things such as scrolling text, shadows, text glow, style, colour, 3D effect and many more.
In this article, we’ll focus on CSS text animations. These are simple and easy to integrate into your design, using pure HTML, CSS, and (in some of them) some JavaScript. You can use them on scrolling animation websites.
33 Amazing Text Animations with CSS
These CSS text animations can be used to make your webpage more interesting and give it a unique design and feel.
You have to be careful though, not all of these CSS text effects will benefit every design. For example, with a minimalistic design, you may want to choose a more subtle effect (just check these Minimalist WordPress themes by yourself and you will easily find out that they could ruin their clean design)
However, there should be a design in here that fits every user’s needs and expectations to improve your design and look. Check out these 21 text animation CSS codepens that we have selected for you.
1. Scroll Based Text Animation
This is a great example of how to use CSS text animation triggered by a user scrolling. This one uses a trigger for scrolling up and down, so the animation will always work in any direction. Scroll-triggered animations are perfect for one-page websites.
If you do not know how to create a one-page website, fullPage.js library will make it easy for you. You can even use it in WordPress builders like Elementor and Gutenberg.
And if you are looking for scroll trigger animations, this article on How to Create CSS Animations on Scroll might be very helpful.
2. Text Colour Animation Effect
This one is just pure HTML and CSS, so it will be very easy to use and does not require any JavaScript. It uses a gradient to send a colorful transition of different colors across the text, giving it a modern look.
You can easily change the chosen colors to fit your brand by altering the hex codes in the CSS.
3. Static CSS Colour Change
Great for a big title, this one changes the color of each word without any transition. This CSS text effect can be useful if you have a minimalistic design and don’t want things to look too busy.
Made purely with HTML and CSS, the animation can easily be changed in color and speed. Just try it yourself by modifying the CSS of the codepen.
4. Morphing CSS Text Effect
This is a more advanced animation made with pure HTML, CSS, and JavaScript. As you can see in the text animation CSS codepen, you can make more advanced animations when adding JavaScript. However, this one is still relatively easy to edit and mold to your brand or style.
5. Bouncing With Reflection Text Animation
A bouncing CSS text effect with a reflection, made with only HTML and CSS, makes it very portable across different websites.
It uses a span HTML element to position each letter in a row and bounces each one during the text animation, so be careful where you place it.
6. Water Wave Text Animation
This is a calm water CSS text effect that animates the effect of a calm wave within the text. It’s great for a range of different titles on a website and could really make them stand out.
This one only uses HTML and CSS, making it easy to work with.
7. Crossing On Scroll CSS Text Effect
If you want something to trigger a text animation, an on-scroll animation like this one may be useful. It uses HTML, CSS, and JavaScript to pull this off. The animation is light and very smooth. Scrolling the letters individually could add more value to this CSS text effect.
8. Cool Text Effect on Loading
Here’s a beautiful loading text effect you can apply to your pages when they load. It’s entirely done in SCSS and HTML, so you won’t have to worry about using external libraries or components.
9. Elastic Text Animation
Here’s a beautiful text effect resulting from applying a variable width to the text by applying a custom-easing animation in combination with the font-variation-settingsproperty. Super original!
10. Loading Style CSS Text Animation
It looks like a loading progress bar but in the form of a font. Change the text to anything you want and use this unique animation. You can easily change the colors of the text animation in the CSS codepen.
11. Flip Text Animation
It can be used as a loading animation when waiting for a response on a webpage, made with only HTML and CSS. The text flips over from left to right and is a smooth animation.
12. Fade In Text Animation
A subtle text animation (CSS) that fades in when the page loads. Very smooth animation and has a subtle blur effect upon fading in. Made with pure HTML and CSS.
13. Text Logo Animation
This logo animation can be ideal for mobile apps and loading pages. It’s a subtle yet beautiful effect that uses the clip-pathproperty in CSS to achieve a beautiful result. And without a single line of JavaScript!
14. SVG Text Effect
This is a great animation example of what you can achieve by animating SVG elements with CSS. This effect uses SVG to create an original border animation around each of the letters of your text.
Updating your text is as easy as updating the textelement in the HTML!
15. 3D Text Grow Animation
CSS Text animation with a 3D effect that grows up and down. It is very fun and engaging.
16. Text Shadow Animation
If you liked the previous animation, move one step further and track the mouse movement with just a bit of JS. This way, you can create a beautiful shadow effect for your text. A super easy way to add a touch of style to your headings on your landing pages!
17. Animated Blobs Text animation
A very subtle CSS text animation with a colorful background and engaging font type. Made with pure HTML and CSS, it is easy to change colors and font types to fit your brand and style.
18. Basic Text Animations
If you are looking for some basic reusable text animations (pure CSS) that can be quickly used in many places on a webpage, these are for you. Made with only HTML and CSS, they are easy to edit and learn from.
19. Sliding Text Animation Carousel
A catchy and engaging CSS text animation is great for the main title on a webpage. It loops through different words and has a sliding animation effect to transition between words. Made with pure HTML and CSS, it is easy to work with and edit.
20. Typing Text Animation
A great way to showcase a range of words or sentences across a screen in one area. The typing CSS text effect looks great for many designs and uses a smooth animation. Made with HTML, CSS, and JavaScript, but a great one to learn from, and it is easy to edit the words you need to use.
21. Disappearing CSS Text Animation
This is an example of adding fun to your website with fancy animation for your text. This text animation plays with the opacity, text-shadowand the skewproperties to achieve this remarkable result. Quite impressive!
22. Shaky Text Effect
This fast text animation is an easy way to catch the visitors’ attention.
23. Text Reveal Animation
24. Text Reveal on Hover
25. Logo Text Reveal Effect
26. Title Animation
27. Text + Background Animation
28. 3D Risen Text
29. Fracture Text
30. Filling Effect
31. Text Animation for Your Portfolio
32. Revealing Light
33. Playful – One Letter At a Time
Conclusion
CSS Text animations are great. They help create an inviting space for visitors and catch the eye in a certain location. They can be very well suited to one-page sites with full-screen sections, creating a very appealing design for the user. I’m thinking about product landing websites, squeeze pages, etc.
It can be difficult to choose the right animation, though. Not all animations will work well on all designs, so be sure to ask yourself if the animation is too busy and maybe opt for a more subtle one. Don’t overuse CSS text effects, either; it will make the page look tacky and overrun with animations.
