Create your own animated text using CSS3

Overview

The main criteria of this blog is to discover knowledge about animated texts. This magic is now possible with CSS only.

What is animated text?

The animated text is nothing but a text having some animations on it. Now the question arises in mind is which type of animations we are talking about? The answer is so simple. Here we have used CSS3 animations only which gives some visual effects to our text.

As before we have faced this so many times that in any design we have some animated text or some colorful text. At that time we have just used simple image in a place of text. But nowadays it is very simple to use so,

Let’s have a look on below image and learn how to get a rid of this kind of problems.

blog

CSS3 Properties Used

There are 3 main CSS3 properties used for this and they are as follows:

  1. Background Clip
  2. -webkit-text-fill-color
  3. Animation

Now let’s have look in brief for all properties.

Background Clip:

Background Clip property is used to specify the painting area and it is a new CSS3 property which is not a part of old CSS. Let’s have a look how it works.

HTML

CSS

Result
animatedtext-1

When we are writing background-clip: text it specifies the painting area of the text. Please note here -webkit- extension is used to support the CSS3 property in chrome and safari. Currently there is no effect after applying this property. Look at the above screenshot. Now let’s move to the next property.

-webkit-text-fill-color:

-webkit-text-fill-color specifies the fill color of characters of text. By default the text used the default color property if the value of -webkit-text-fill-color is not set. Let’s have at look how it works.

HTML

CSS

Result
animatedtext-2

See the above screenshot. After applying this property we will get this type of transparent text.

Animation

We all know the basic animation functionality. Animations are the part of the design which gives visual effects to our designs. An animation allows an element to change gradually from one style to another. Here we have animated the text background gradually. Let’s have a look on the animations used in our example.

HTML

CSS
@keyframes color-text {
0% {
background-position: 0 0;
}
10%{
background-position: 100px 0;
}
20%{
background-position: 200px 0;
}
30%{
background-position: 300px 0;
}
40%{
background-position: 400px 0;
}
50%{
background-position: 500px 0;
}
50%{
background-position: 650px 0;
}
60%{
background-position: 750px 0;
}
70%{
background-position: 850px 0;
}
80%{
background-position: 950px 0;
}
90%{
background-position: 1100px 0;
}
100% {
background-position: 1262px 0;
}
}

h2 { -webkit-animation: color-text 5s infinite; animation: color-text 5s infinite;}

Result
blog

That’s it!! Hope you enjoyed the blog. Thank you

mm

Hitarthi Suthar Sr. Web Designer

I am a Sr. Web Designer at Yudiz Solutions Pvt. Ltd. - a leading Web and Mobile Apps development company. I am passionate about my work as I like to explore new technologies and methods related to my profile. I am fond of craft and painting.

Leave a Reply

Top