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.

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

<h2 class=”animated”>This is an Animated Text</h2>

CSS

h2     { font-size: 100px; font-weight: 800; text-align: center; background: linear-gradient(to right, #ffe641 0%, #ffffff 15%, #ffe641 35%, #ffffff 50%, #ffe641 85%, #ffe641 90%, #ffffff 100%) repeat; }

h2.animated { background-clip: text; -webkit-background-clip: text;}

Result

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

<h2 class=”animated”>This is an Animated Text</h2>

CSS

h2.animated { -webkit-text-fill-color: transparent;}

Result

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

<h2 class=”animated”>This is an Animated Text</h2>

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

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