Spinning Circular Text

15 Gorgeous CSS Text Animation Effects [Examples]

One important factor of 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 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.

On this article we’ll be focusing on CSS Text Animations. These are simple and easy to integrate into your design, with pure HTML, CSS and (in some of them) some JavaScript. You can use them on scrolling animation websites.

15 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 15 text animation CSS codepens that we have selected for you.

1. Scroll Trigger Text Animation

A great example of how you can take advantage of CSS text animation which is triggered by a user scrolling. This one uses a trigger both 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 for you.

2. Text Colour Animation Effect (CSS only)

This one is just pure HTML and CSS, so it will be very easy to use and does not require any JavaScript. It sends a colourful transition of different colours across the text using a gradient, giving a very modern look.

You can easily change the chosen colours to fit your own brand by altering the hex codes in the CSS.

3. Static CSS Colour Change

Great for a big title, this one changes the colour 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, you can easily change the colours and speed of the animation. Just try it yourself by modifying the CSS of the codepen.

4. Morphing CSS Text Effect

A more advanced animation which is made with pure HTML, CSS and JavaScript. As you can see in the text animation CSS codepen, you can make more advanced animations when you add a little JavaScript. However, this one is still relatively easy to edit and mould to your brand or style.

5. Bouncing With Reflection Text Animation (CSS only)

A bouncing CSS text effect that has a reflection, made with only HTML and CSS, making 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 (CSS only)

A calm water CSS text effect, it animates the effect of a calm wave within the text. Great for a range of different titles on a website, could really make it stand out.

This one only uses HTML and CSS, making it easy to work with.

7. Crossing On Scroll CSS Text Effect

If you are looking for something to trigger a text animation, an on-scroll animation like this one may be of use to you. It uses HTML, CSS and JavaScript to pull this off. The animation is light and very smooth. Scrolling the letters individually could also add more value to this CSS text effect.

8. Loading Style CSS Text Animation

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 colours of the text animation in the CSS codepen.

9. Flip Text Animation (CSS only)

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 very smooth animation.

10. Fade In Text Animation (CSS only)

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.

11. 3D Text Grow Animation

Text animation (CSS) with a 3D effect that grows up and down. A very fun and engaging animation to use.

12. Animated Blobs Text animation (CSS only)

A very subtle CSS text animation with a colourful background and engaging font type. Made with pure HTML and CSS, it is easy to change colours and font type to fit your brand and style.

13. Basic Text Animations (CSS only)

If you are looking for some basic reusable text animations (pure CSS) that can be quickly used in many places on a webpage, these ones are for you. Made with only HTML and CSS, they are easy to edit and learn from.

14. Sliding Text Animation Carousel (CSS only)

A catchy and engaging CSS text animation great for the main title on a webpage. It loops through different words and has a sliding animation effect to transition between each word. Made with pure HTML and CSS, so it is easy to work with and edit.

15. 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.

Conclusion

CSS Text animations are great, they help create an inviting space for the visitors and help catch the eye towards a certain location. They can suit very well in one-page websites with full screen sections, creating a very appealing design for the user. I’m thinking about product landing websites, squeeze pages, etc.

FullPage.js library is the perfect tool to create this kind of fullscreen website. It is available for WordPress builders like Elementor and Gutenberg. Add one of these CSS text animations in fullscreen mode and I’m sure the result will be promising. For example, as we explained in the 1st CSS text animation, the scroll-triggered animation fits very well in a one-page website with multiple sections.

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.

Related Articles

Luke Embrey is a full-stack developer, BSc in Computer Science and based in the UK.
You can find out more about him at https://lukeembrey.com/

Join 2,000+ readers and learn something new every month!

Источник

Spinning Circular Text

Today, we’re going to learn about a fun retro effect where, using only HTML, CSS, and SVG, we are going to make some circular text spin. It is going to look a bit like the following (open in new window):

In the following sections, we’ll look into the ins and outs of how to make an effect like this work.

Creating the Effect

There are two parts to this effect. There is the cool and interesting part where we take some text and have it go all circular on us. Then there is the animation part, which is also cool and interesting, where we take our circular text and make it spin. We’ll tackle each part individually.

To follow along, create a new HTML document and add the following markup into it:

       .main    

We have some style rules and a div element that will house our content, but nothing else major is going on here.

If we preview our page now, what we will see is mostly a blank page. We’ll start filling it with content to change this blank situation next.

Specifying the Circular Text

The first thing we are going to do is specify our circular text, and we will do all of this inside an SVG element. Inside our main div element, add the following SVG markup:

The text we want to display is part of our text element:

If we preview our document right now, we’ll see some text starting to wrap around an invisible circle:

Before we go further, let’s take a quick look at what inside our SVG makes this work. The part that makes our text appear circularly is a combination of two things:

1. The textPath element that specifies what shape the text should follow
2. The path element where we actually specify the coordinates of the shape used by textPath

Let’s highlight the textPath and path elements to better see how they work together:

Now, there are several ways we can define the exact size and coordinates of our circle. One approach is to draw a circle in a tool like Figma, Sketch, or Illustrator and copy the output as an SVG that uses paths as opposed to a circle shape primitive:

That the output uses the path element is important, and the SVG: Convert Shape to Path video explains how to do this easily. If your output contains a circle defined using the circle element, our textPath element won’t know what to do.

If we get back to our example, we can see that it doesn’t look quite right. Our text seems to be following a semi-circle as opposed to nicely rotating around a whole circle. This is caused by our text taking up less space than the size of the circle we want it to rotate around.

We can fix this with some styling, so add the following highlighted link elements and .text style rule:

   [email protected]&display=swap" rel="stylesheet"> .text < font-weight: 600; letter-spacing: 1.7px; text-transform: uppercase; font-family: 'Kanit'; font-size: 17px; fill: #111; text-shadow: 2px 0px #ccc; >.main < display: grid; align-items: center; justify-items: center; >.main img 

When we preview this in our browser, we’ll now see something that looks like the following:

This looks good. Our text fully wraps around the circular path we defined in our SVG.

Ensuring Consistency

This effect is a little finicky in that minor variations in letter spacing or how the font renders will make the effect look weird. To maximize consistency, we specify a custom font that will look the same for all users across browsers and platforms:

  [email protected]&display=swap" rel="stylesheet">

If you don’t have a favorite place to get a custom font from, Google Fonts is a great resource.

Beyond just the font, there are a few more things for us to specify such as the length of our text, the font size, font-weight, and the letter spacing. All of these properties, in combination, play a key role in ensuring our text appropriately wraps our circular path:

For any changes you make, you’ll be fiddling with these CSS properties in largely a trial-and-error fashion. For example, the letter-spacing being set to 1.7px was one that came out of experimenting with various values to see what generated the best final appearance.

Animating our Circular Text

With our text appearing correctly, all that remains is for us to have our text spin. This will be done via a CSS animation applied to our entire SVG element. Inside our style tag, add the following CSS:

#rotatingText < animation-name: rotate-circle; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; >@keyframes rotate-circle < to < transform: rotate(1turn); >>

We are specifying a keyframes collection called rotate-circle, and we are specifying a single to keyframe that rotates an element a full rotation. This full rotation is specified using the turn syntax:

The 1turn value is the same as writing 360deg.

Lastly, to ensure our animation runs forever and without any acceleration and deceleration, we set our animation-iteration-count to infinite and the animation-timing-function to be linear.

When we put this all together, we have our circular text spinning over and over. and over.

Conclusion

The final markup that ties everything together (and adds a few extras like the spinning hamburger) can be seen below:

        [email protected]&display=swap" rel="stylesheet"> body < width: 100vw; height: 100vh; margin: 0; padding: 0; display: grid; >.text < font-weight: 600; letter-spacing: 1.7px; text-transform: uppercase; font-family: 'Kanit'; font-size: 17px; fill: #111; text-shadow: 2px 0px #ccc; >#rotatingText < animation-name: rotate-circle; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; >@keyframes rotate-circle < to < transform: rotate(1turn); >> .main < display: grid; align-items: center; justify-items: center; >.main img < position: absolute; >.main img  
     
  

Overall, this entire spinning circular text effect brings together the flexibility of SVG and the familiarity of CSS animations. Who knows what other cool things we can do by bringing HTML, CSS, and SVG together?

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

• Arrays From Noob to Ninja
  • BUY
• JavaScript Absolute Beginner’s Guide
  • BUY
• Learning React:
  A Hands-on Guide
  • BUY
• Creating Web Animations
  • BUY

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 — delivered weekly to over a bazillion subscribers!

Serving you freshly baked content since 1998!
Killer hosting by GoDaddy

Источник