Here you can learn how to make wavy text animation effect using css only so if you like our article the visit more. To give text animation effect, you should have some html and css knowledge, after that you have to install a code editor named visual studio code, download it and install it then open it and select new file its name file.html then save it.
HTML
If you want to generate html syntex automaticlly then press key ctrl+1 after this html snipet automaticlly generate by visual studio code editor now give the title in <title> Wavy Text Animation Effect Using CSS </title> tag. Then go to the body tag and select the div tag and give class like <div></div> and in this div give the span tag for characters. If you not understand how to make wavy text animation effect by reading then look the html source code for understanding.
Source Code..
<div>
<span style="--i:1">C</span>
<span style="--i:2">O</span>
<span style="--i:3">D</span>
<span style="--i:4">E</span>
<span style="--i:5">-</span>
<span style="--i:6">W</span>
<span style="--i:7">I</span>
<span style="--i:8">T</span>
<span style="--i:9">H</span>
<span style="--i:10">-</span>
<span style="--i:11">N</span>
<span style="--i:12">I</span>
<span style="--i:13">Z</span>
<span style="--i:14">A</span>
<span style="--i:15">M</span>
<span style="--i:16">I</span>
</div>CSS
I hope you understand already about css. So css is stand for cascading style sheet for web designing this is used all the web pages for good looking pages. You can use css inline or internal and external in this artcle we are use internal css and you can used it external but not use inline because you can not use all properties in the inline css. This is a text animation designed by Raul Dronka, the text has a wavy animation and each individual character has a bouncy effect with shadows and all. This would work well in any section where you want to add some really cool effect to a block of text.
“Text animation” is a broad term in computer graphics that refers to the creation of moving letters, words, or paragraphs. In animation, it is concerned with creating text that moves in some fashion on the screen, within an area, or by following a pattern of motion. If you also want that wavy text animation can be applied in your project or you want to know how to make it too then stay with us because we will tell you how to make wavy text animation without svg just by css then starting Read this from us till the last and learn how to make wavy text animation, it will be our duty to explain you well, if you still have any problem in reading or understanding, then we have also given the code for you so that you can see it. Understand well.
If you still have any problem in understanding, then copy our given script code and paste it in your code editor so that you will save a lot of time and you do not have to do coding, so we have used every code to understand you has done. You can also get the source code in each of our articles here for free. Because our aim is for you to learn.
So first give * symbol like this *{} and in this give the margin 0, padding 0, and box-sizing boder-box, and font used depend on your choice somthing like this.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Merienda’, cursive;
}
After this give the body tag like this body{} and in this tag give the display flex, justify-content center, align-items center, min-height 100vh, background-color black for example.
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
And give the class .wavy like .wavy{} give the position relative and -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0,0,0,0.1)); for bottom object like shadow like this.
.wavy{
position: relative;
-webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0,0,0,0.1));
}
After give the span tag with class and make position relative display inline-block color rgb also, font-size 4em, and animation, animation delay like.
.wavy span{
position: relative;
display: inline-block;
color: rgb(2, 255, 234);
font-size: 4em;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(–i));
}
And now finaly make keyframe for animate you object for make this give the keyframe tag like @keyframe animate{} in this you can give all properties name like. transform rotate(), and transform translateY, translateX, translateZ. This is used mostly for make animation in the elements for make auto animation it is used in the keyframe ta for better repeat and repeat animate.
@keyframes animate{
0%{
transform: translateY(0px);
}
20%{
transform: translateY(-40px);
}
40%,100%{
transform: translateY(0px);
}
}
So i hope you understand about this style because we are explain all steps easily. If you not understand or any confusion related this so you can see our css code in the below for helping your page style and make easily all design using our css code.
Top Articles
How to make Neumorphism Registration Form Using HTML, CSS?
How to create validation form using html, css, javascript?
How to design tea cup with bapour effect using html, css?
How to design neumorphism user profile using html, css?
How to make Glass Class card with employee list using html, css?
How to create a beautiful footer using html, css?
How to make neumorphism clock using html, css and javascript?
How to design user profile like a instagram or facebook using html, css?
Friends as you have read how to make wavy text animation. And you must have understood something after reading our article. And if you want to read the rest of our articles as well, then go to the searchbar and search related to web designing and read, we have also made creatives for you.
Which you will like very much and some creative can also be useful in your real project. So go to the search bar and type css creative, all the creatives we have made in front of you will come. And if you like to watch through videos then visit our channel named codewithnizami where you will get to see javascript projects and html projects and css creatives. I hope That you will also visit our channel.
Source Code..
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Merienda', cursive;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
.wavy{
position: relative;
-webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0,0,0,0.1));
}
.wavy span{
position: relative;
display: inline-block;
color: rgb(2, 255, 234);
font-size: 4em;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes animate{
0%{
transform: translateY(0px);
}
20%{
transform: translateY(-40px);
}
40%,100%{
transform: translateY(0px);
}
}Watch video related this article…
