Dear friends in this articles we learn about Happy New Year 2022 | Text Animation using css. If you like our article then visit more.
Text With Animation
Font design or typography is intrinsic in clearly expressing a message and attracting visitors to a website. Font developers help to ensure that the text is inviting to readers. And here you can make it easily on the code editor and this is awesome text animation effect.
One of the features they use is CSS text animation to improve the design. If users want to create a minimalist text design, they can opt for the half-baked features. There are two make design using for interesting article and get more best.
Simple Text
But the good news is that website users can have a simple text animation using css design that fits their needs and preferences. This is make a good text animation and it is a very unique design.
Users can choose from trigger-based action or an autoloading effect. Read on to discover handpicked text animations that show the creative side of a website. Do you know how can make a text animation using css effect using css and if you make for easily this then get source code related this article. I hope you understand about html and css because this is a most popular languages for make web pages and you make web application using html css. Here we are make a text with animation and for animate we are used some keyframes using css and you can create multiple pages with the some css code. If you want to make a web page then you understand about three languages first you are perfect in html langauge after this css and javascript.
This article highlights pure CSS animated text effects that web owners and admins can use for their web pages.
HTML for Text Animation
Dear friends, now we will tell you where to write the code of html, so let us know how to write the code of html so that we can make this text animation using css. So first of all you have to go to body tag and going there you will take a h3 tag and in that we will write data text Happy New Year after that we will again take h3 tag and also write data text in it whose name will be year then take h1 tag and In that also we will take data text and then we will write 2022 inside it.
CSS for Text Animation
Now we will know how to use css and how to use it, let’s know. First of all you have to know its methods how we use css. So let’s know that first we can use css inline, that means we can use css in the code of html itself by giving style inside any tag and secondly we can use css internally too. Meaning we can use css by going to head section and giving style tag and thirdly we can use it by creating css file. But we have used css internally in this article so that we can work in a single file.
Now we will write the css, first we have to go to the head section and by going there we have to take the style tag. After that we will take * tag then in this we will keep margin as 0 and padding as 0 after that we will keep box sizing as border box. Then we’ll take the body tag and give it the background color #161616, something like this.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #161616;
}
After that we’ll take the h3 tag and place the position aboslute in it, then we’ll make it 10% from the top and 30% from the left. Then we will take font size 80px in it after that we will take color #161616 then webkit text stroke 0 point 3vw #212227 after that we will put font family boon in it.
h3{
position: absolute;
top: 10%;
left: 30%;
font-size: 80px;
color: #161616;
-webkit-text-stroke: 0.3vw #212227;
font-family: verdana;
}
Now we will put before in h3 tag and take content attr data text in it which we gave in html then we will give it position absolute and keep 0 left from top then also keep width 0 then we will make height 100% then in this We will keep the color rgb.
h3::before{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: rgb(0, 255, 21);
-webkit-text-stroke: 0vw #383d52;
border-right: 2px solid rgb(0, 255, 21);
overflow: hidden;
animation: animate 6s linear infinite;
}
Friends, to give animation to the text, you have to use keyframe so that we can animate the text, so let’s know how to give animation. First you have to copy the variable which you have taken after animation then we will take keyframe and paste the animate variable then apply curly braces open and close then we will take 0%, 10%, 100%, and again Let’s take curly braces open and close in that we keep the width at 0 then we will make the width at 70%, and 90% at 100%. Please check the code given below for quotation.
@keyframes animate{
0%,10%,100%{
width: 0;
}
70%,90%{
width: 100%;
}
}
Friends, like we have written the property in h3 heading, in the same way the same property will be written in h2 heading, so you copy and paste the property with h3 so that it does not take much time for you to write the code and you can write the codes easily.
Source Code..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Animation</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #161616;
}
h3{
position: absolute;
top: 10%;
left: 30%;
font-size: 80px;
color: #161616;
-webkit-text-stroke: 0.3vw #212227;
font-family: verdana;
}
h3::before{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: rgb(0, 255, 21);
-webkit-text-stroke: 0vw #383d52;
border-right: 2px solid rgb(0, 255, 21);
overflow: hidden;
animation: animate 6s linear infinite;
}
@keyframes animate{
0%,10%,100%{
width: 0;
}
70%,90%{
width: 100%;
}
}
h2{
position: absolute;
top: 30%;
left: 40%;
font-size: 100px;
color: #161616;
-webkit-text-stroke: 0.3vw #212227;
font-family: verdana;
}
h2::before{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: rgb(255, 230, 0);
-webkit-text-stroke: 0vw #383d52;
border-right: 2px solid rgb(255, 230, 0);
overflow: hidden;
animation: animate 6s linear infinite;
}
@keyframes animate{
0%,10%,100%{
width: 0;
}
70%,90%{
width: 100%;
}
}
h1{
position: absolute;
top: 55%;
left: 32%;
font-size: 30vh;
color: #161616;
-webkit-text-stroke: 0.3vw #212227;
font-family: verdana;
}
h1::before{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: red;
-webkit-text-stroke: 0vw #383d52;
border-right: 2px solid red;
overflow: hidden;
animation: animate 6s linear infinite;
}
@keyframes animate{
0%,10%,100%{
width: 0;
}
70%,90%{
width: 100%;
}
}
</style>
</head>
<body>
<h3 data-text="HAPPY_NEW">HAPPY_NEW</h3>
<h2 data-text="YEAR">YEAR</h2>
<h1 data-text="2022">2022</h1>
</body>
</html>Watch video related this article…
