Text animation HTML code:
Scalable vector graphics is known as SVG. Based on XML, it is a picture format. To produce two-dimensional images, it generates various geometric forms that can be merged. Now, using this image format we are going to add effects on text.
You will learn to add animation to
the SVG text (image) on this page using HTML and CSS (text animation HTML code). On this page, you will
get a full explanation of making text animation with SVG and you will also get
the full source of this code.
Program info:
|
Project
Name |
text
animation HTML code (How to create text animation in HTML and CSS) |
|
Details |
This program is made up of HTML and CSS.
In this program we used Scalable vector graphics means SVG to animate a particular text. |
|
Type |
HTML
and CSS |
|
Published by |
Codes Gallery |
|
Developer |
Chetan
Bedakihale |
Steps to animate text in HTML and CSS:
1. First, open the HTML editor on your computer or mobile.
2. Now make two files
named Textanimation.html and Textstyle.css
3. Now, let's start coding.
4. We begin by
linking a CSS file Textstyele.css to the HTML file Textanimation.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Animation using html and css</title>
<link rel="stylesheet" href="Textstyle.css">
</head>
5. Next, we create a
div inside the body tag of the HTML file with the class name container.
<<body>
<div class="container">
</div>
</body>
6. Then, we style the
body of the HTML and container class in CSS. Now inside the file Textstyle.css,
we set the margin, padding, background color, etc. So, we can use the following
code to do this.
*{
margin:0;
padding:0;
}
body{
background:#f2f2f1;
}
.container{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:600px;
height:120px;
}
7. After that, we
create another div inside another div container. In that, we add an SVG
tag with the ID name "line-animation1" and give it width,
height, and viewBox.
<body>
<div class="container">
<div>
<svg id="line-animation1" width="600" height="120" viewBox="0 0 640 100" fill="none">
</svg>
</div>
</body>
8. Then in the SVG line-animation1,
we add 5 text tags with the same class name " animation-text"
and give it X and Y values, and give style attributes to animate text. In the
style attribute, we give the stroke, stroke width, and font size. We add a
single letter to each text tag. We use different X values to give different positions to each letter.
<div class="container">
<div>
<svg id="line-animation1" width="600" height="120" viewBox="0 0 640 100" fill="none">
<text class="animation-text" x="30px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">C</text>
<text class="animation-text" x="90px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">o</text>
<text class="animation-text" x="145px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">d</text>
<text class="animation-text" x="203px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">e</text>
<text class="animation-text" x="255px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">s</text>
</svg>
</div>
</div>
9. After that we
create another div tag in the div container. In this div, we create one more
SVG tag with the ID name "line-animation2" and give it width,
height, and viewBox.
<div class="container">
<div>
<svg id="line-animation1" width="600" height="120" viewBox="0 0 640 100" fill="none">
<text class="animation-text" x="30px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">C</text>
<text class="animation-text" x="90px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">o</text>
<text class="animation-text" x="145px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">d</text>
<text class="animation-text" x="203px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">e</text>
<text class="animation-text" x="255px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">s</text>
</svg>
</div>
<div>
<svg id="line-animation2" width="610" height="120" viewBox="0 0 630 100" fill="none">
</svg>
</div>
</div>
10. Then in the SVG
line-animation2, we add 7 text tags with the same class name " animation-text
", give the X and Y values, and give style attributes to animate text. Now
add a single letter to each text tag.
<div class="container">
<div>
<svg id="line-animation1" width="600" height="120" viewBox="0 0 640 100" fill="none">
<text class="animation-text" x="30px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">C</text>
<text class="animation-text" x="90px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">o</text>
<text class="animation-text" x="145px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">d</text>
<text class="animation-text" x="203px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">e</text>
<text class="animation-text" x="255px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">s</text>
</svg>
</div>
<div>
<svg id="line-animation2" width="610" height="120" viewBox="0 0 630 100" fill="none">
<text class="animation-text" x="320px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">G</text>
<text class="animation-text" x="380px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">a</text>
<text class="animation-text" x="435px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">l</text>
<text class="animation-text" x="455px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">l</text>
<text class="animation-text" x="475px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">e</text>
<text class="animation-text" x="525px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">r</text>
<text class="animation-text" x="565px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">y</text>
</svg>
</div>
</div>
11. Now, we give the
position to both SVG tags using CSS to look at both texts in the same
horizontal line.
#line-animation1{
position:absolute;
top:49.5%;
left:49.5%;
transform:translate(-50%,-50%);
}
#line-animation2{
position:absolute;
top:49.5%;
left:49%;
transform:translate(-50%,-50%);
}
12. Now we change the
font of the text using "Google Fonts". You can copy and paste
the given font link into the CSS file. Then change the stroke color of ID
line-animation2.
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
.container{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:600px;
height:120px;
font-family: 'Righteous', cursive; /*Adding font family to the text*/
}
13. Now let's animate each text stroke one by one with the help of stroke-dasharray and stroke-dashoffset properties of CSS.
Stroke-dasharray: The stroke-dasharray property in CSS is for creating dashes in the stroke of SVG shapes. The higher the number, the more space in between dashes in the stroke.
Stroke-dashoffset: The stroke-dashoffset property in CSS defines the location along an SVG path where the dash of a stroke will begin. The higher the number, the dashes will begin along the path.
I suggest you use the ":nth-child(n)"
pseudo-class to animate each letter. Because we used a total of 14 text tags
with the same class name. It will be very easy to add animations of the same
class name.
14. Use the same
values to stroke-dasharray and stroke-dashoffset according to different letter
sizes to cover the whole size of the letter. When you give the same value of
stroke-dasharray to the stroke-dashoffset, the letter will be invisible. For
example, see the following screenshot.
#line-animation1 .animation-text:nth-child(1){
stroke-dasharray:300;
stroke-dashoffset:300;
}
#line-animation1 .animation-text:nth-child(2){
stroke-dasharray:154;
stroke-dashoffset:154;
}
#line-animation1 .animation-text:nth-child(3){
stroke-dasharray:230;
stroke-dashoffset:230;
}
#line-animation1 .animation-text:nth-child(4){
stroke-dasharray:210;
stroke-dashoffset:210;
}
#line-animation1 .animation-text:nth-child(5){
stroke-dasharray:264;
stroke-dashoffset:264;
}
Now, do it same process on the second SVG line-animation2.
15. Now, it's time to
animate each letter one by one. To animate each letter, we use the @keyframes
property in CSS. For example, see the
following code.
@keyframes animat{
to{
stroke-dashoffset:0;
}
}
16. Now, use the animation
property in nth-child pseudo-class 1 to 5 and 1 to 7. In the animation property, add keyframe
name, animation-duration, animation-timing-function, animation-direction, and animation-delay.
From nth-child(1) to (7) keep increasing the animation-delay time to
appear letters one by one.
#line-animation1 .animation-text:nth-child(1){
stroke-dasharray:300;
stroke-dashoffset:300;
animation:animat 2s ease-in-out forwards 0.2s; /* using animation property to animate all the text. */
}
#line-animation1 .animation-text:nth-child(2){
stroke-dasharray:154;
stroke-dashoffset:154;
animation:animat 2s ease-in-out forwards 0.3s;
}
#line-animation1 .animation-text:nth-child(3){
stroke-dasharray:230;
stroke-dashoffset:230;
animation:animat 2s ease-in-out forwards 0.6s;
}
#line-animation1 .animation-text:nth-child(4){
stroke-dasharray:210;
stroke-dashoffset:210;
animation:animat 2s ease-in-out forwards 0.9s;
}
#line-animation1 .animation-text:nth-child(5){
stroke-dasharray:264;
stroke-dashoffset:264;
animation:animat 2s ease-in-out forwards 1.2s;
}
#line-animation2 .animation-text:nth-child(1){
stroke-dasharray:400;
stroke-dashoffset:400;
animation:animat 2s ease-in-out forwards 1.5s;
}
#line-animation2 .animation-text:nth-child(2){
stroke-dasharray:220;
stroke-dashoffset:220;
animation:animat 2s ease-in-out forwards 1.8s;
}
#line-animation2 .animation-text:nth-child(3){
stroke-dasharray:156;
stroke-dashoffset:156;
animation:animat 2s ease-in-out forwards 2.1s;
}
#line-animation2 .animation-text:nth-child(4){
stroke-dasharray:156;
stroke-dashoffset:156;
animation:animat 2s ease-in-out forwards 2.4s; /* using animation property to animate all the text. */
}
#line-animation2 .animation-text:nth-child(5){
stroke-dasharray:217;
stroke-dashoffset:217;
animation:animat 2s ease-in-out forwards 2.7s;
}
#line-animation2 .animation-text:nth-child(6){
stroke-dasharray:163;
stroke-dashoffset:163;
animation:animat 2s ease-in-out forwards 3s;
}
#line-animation2 .animation-text:nth-child(7){
stroke-dasharray:300;
stroke-dashoffset:300;
animation:animat 2s ease-in-out forwards 3.3s;
}
17. After that we
will fill color in the 1 to 5 texts. To do this we create another keyframe named color1. In that, the starting color of the text
was transparent, and then, when the animation goes to the end the sky blue
color was filled in line-animation1.
@keyframes color1{
from{
fill:transparent;
}
to{
fill:#0075ff;
}
}
18. Then, we add
animation properties to the line-animation1 (text) with keyframe name(color1),
animation-duration, animation-timing-function, animation-direction, and animation-delay.
#line-animation1{
position:absolute;
top:49.5%;
left:49.5%;
transform:translate(-50%,-50%);
animation:color1 1s ease-out forwards 5.9s;
}
19. After that, we
fill the color to the second ID line-animation2 (text). To do this we
create another keyframe named color2. In this, the starting color of the text was transparent, and then, when the
animation goes to the end the black color was filled in the ID line-animation2
(text).
@keyframes color2{
from{
fill:transparent;
}
to{
fill:#130d0b;
}
}
20. Now, we add
animation properties to the ID line-animation2 with keyframe name(color2),
animation-duration, animation-timing-function, animation-direction, and animation-delay.
#line-animation2{
position:absolute;
top:49.5%;
left:49%;
transform:translate(-50%,-50%);
animation:color2 1s ease-out forwards 5.9s;
}
21. Now, we jump to
the final step, which is adding box-shadow to the class container. we
give a shadow to the class container to make the text look more attractive. First, we create one more keyframe
named box-shadow.
@keyframes box-shadow{
to{
border-radius:12px;
background:#e0e0e0;
box-shadow:5px 5px 10px #a4a4a4,
-5px -5px 10px #ffffff;
}
}Now, we add the animation property to the class container. That's it! Here we successfully created an SVG text animation program with the help of HTML and CSS.
.container{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:600px;
height:120px;
font-family: 'Righteous', cursive;
animation:box-shadow 1s ease-out forwards 6.7s; /* we use animation property to animate container. */
}
Full source code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Animation using html and css</title>
<link rel="stylesheet" href="Textstyle.css">
</head>
<body>
<div class="container">
<div>
<svg id="line-animation1" width="600" height="120" viewBox="0 0 640 100" fill="none">
<text class="animation-text" x="30px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">C</text>
<text class="animation-text" x="90px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">o</text>
<text class="animation-text" x="145px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">d</text>
<text class="animation-text" x="203px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">e</text>
<text class="animation-text" x="255px" y="80px" style="stroke:#0075ff; stroke-width:2.5px; font-size:90px">s</text>
</svg>
</div>
<div>
<svg id="line-animation2" width="610" height="120" viewBox="0 0 630 100" fill="none">
<text class="animation-text" x="320px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">G</text>
<text class="animation-text" x="380px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">a</text>
<text class="animation-text" x="435px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">l</text>
<text class="animation-text" x="455px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">l</text>
<text class="animation-text" x="475px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">e</text>
<text class="animation-text" x="525px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">r</text>
<text class="animation-text" x="565px" y="80px" style="stroke:#130d0b; stroke-width:2.5px; font-size:90px">y</text>
</svg>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
*{
margin:0;
padding:0;
}
body{
background:#f2f2f1;
}
.container{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:600px;
height:120px;
font-family: 'Righteous', cursive;
animation:box-shadow 1s ease-out forwards 6.7s;
}
#line-animation1{
position:absolute;
top:49.5%;
left:49.5%;
transform:translate(-50%,-50%);
animation:color1 1s ease-out forwards 5.9s;
}
#line-animation2{
position:absolute;
top:49.5%;
left:49%;
transform:translate(-50%,-50%);
animation:color2 1s ease-out forwards 5.9s;
}
#line-animation1 .animation-text:nth-child(1){
stroke-dasharray:300;
stroke-dashoffset:300;
animation:animat 2s ease-in-out forwards 0.2s;
}
#line-animation1 .animation-text:nth-child(2){
stroke-dasharray:154;
stroke-dashoffset:154;
animation:animat 2s ease-in-out forwards 0.3s;
}
#line-animation1 .animation-text:nth-child(3){
stroke-dasharray:230;
stroke-dashoffset:230;
animation:animat 2s ease-in-out forwards 0.6s;
}
#line-animation1 .animation-text:nth-child(4){
stroke-dasharray:210;
stroke-dashoffset:210;
animation:animat 2s ease-in-out forwards 0.9s;
}
#line-animation1 .animation-text:nth-child(5){
stroke-dasharray:264;
stroke-dashoffset:264;
animation:animat 2s ease-in-out forwards 1.2s;
}
#line-animation2 .animation-text:nth-child(1){
stroke-dasharray:400;
stroke-dashoffset:400;
animation:animat 2s ease-in-out forwards 1.5s;
}
#line-animation2 .animation-text:nth-child(2){
stroke-dasharray:220;
stroke-dashoffset:220;
animation:animat 2s ease-in-out forwards 1.8s;
}
#line-animation2 .animation-text:nth-child(3){
stroke-dasharray:156;
stroke-dashoffset:156;
animation:animat 2s ease-in-out forwards 2.1s;
}
#line-animation2 .animation-text:nth-child(4){
stroke-dasharray:156;
stroke-dashoffset:156;
animation:animat 2s ease-in-out forwards 2.4s;
}
#line-animation2 .animation-text:nth-child(5){
stroke-dasharray:217;
stroke-dashoffset:217;
animation:animat 2s ease-in-out forwards 2.7s;
}
#line-animation2 .animation-text:nth-child(6){
stroke-dasharray:163;
stroke-dashoffset:163;
animation:animat 2s ease-in-out forwards 3s;
}
#line-animation2 .animation-text:nth-child(7){
stroke-dasharray:300;
stroke-dashoffset:300;
animation:animat 2s ease-in-out forwards 3.3s;
}
@keyframes animat{
to{
stroke-dashoffset:0;
}
}
@keyframes color1{
from{
fill:transparent;
}
to{
fill:#0075ff;
}
}
@keyframes color2{
from{
fill: transparent;
}
to{
fill:#130d0b;
}
}
@keyframes box-shadow{
to{
border-radius:12px;
background:#e0e0e0;
box-shadow:5px 5px 10px #a4a4a4,
-5px -5px 10px #ffffff;
}
}
Post a Comment
You are welcome to share your ideas with me in the comments!