Create Wave Text Animation Effect Using HTML And CSS Code
Published: 2023-06-02 08:08:55

Hi, guys Greetings, and thanks for visiting our blog. Today's article will demonstrate how to make a **[Wave Text Animation Effect](https://www.codewithrandom.com/2022/09/06/wave-text-effect-using-html-css/)** using basic HTML and CSS. Before that, it was clear what this project was all about.

An animation in which the text is made to animate in a wave style is known as a wave text effect. With the aid of only CSS in this case, we used a phrase and animated it in a wave pattern. any text to be altered to include this kind of impact. The CSS ideas of animations, keyframes, ease-in and many others should be understood by us.

So,  Let's Begin Our Wave Text Effect Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

## HTML Code For Wave Text Animation
```
<div class="logo is-animetion">
  <span>M</span>
  <span>S</span>
  <span>E</span>
  <span>E</span>
  <span>K</span>
</div>
```
Here in this HTML code, We have just added our text to make it wave. So for that, we are first creating a div class and inside of the div class, we just add a single by single word with the span tag, and then we close the div tag.

Now We are going to perform a Wave Animation on the given text using the CSS code mentioned below.

## CSS Code For Wave Text Animation
```
.logo.is-animetion {
  margin-top: 0.6em;
}

.logo.is-animetion span {
  display: inline-block;
  animation: wave-text 1s ease-in-out infinite;
}

.logo.is-animetion {
  span:nth-of-type(1){ animation-delay: 0.0s; }
  span:nth-of-type(2){ animation-delay: 0.1s; }
  span:nth-of-type(3){ animation-delay: 0.2s; }
  span:nth-of-type(4){ animation-delay: 0.3s; }
  span:nth-of-type(5){ animation-delay: 0.4s; }
}

@keyframes wave-text{
  00%{
    transform: translateY(0em);
  }
  60%{
    transform: translateY(-0.6em);
  }
  100%{
    transform: translateY(0em);
  }
}

// Demo
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-size: 2em;
  font-family: 'Courgette', cursive;
}
```
Now we added our CSS code Successfully. Here I am going to explain the code in steps that make you understand easily. So Let's begin.

**STEP 1:** Now in this step, we just align and make the center of the content and fix the font family and size and these are done in the Body section.
```
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-size: 2em;
  font-family: 'Courgette', cursive;
}
```
**STEP 2:** In this step, we first called out the div class name (logo is-animation) and made it come down using the margin-top property, and then we just called out the spans inside the div class and fixed it to display in the same line using display: inline-block property and we giving the animation name in that with animation performance and timing.
```
.logo.is-animetion {
  margin-top: 0.6em;
}

.logo.is-animetion span {
  display: inline-block;
  animation: wave-text 1s ease-in-out infinite;
}
```
**STEP 3:** In this Last step, We again call out the div class and mention the span inside of it. But the span is mentioned with the nth-child property as because we are setting animation-delay property to every single word so for that, we are using nth-child also the nth child is declared by number (1,2,3..) for calling next, next span, and set a specific delay on the word.

Now lastly, We started performing  Wave Text Effect animation by declaring keyframes and the animation name and we started adding the percentage values to perform specific animations on the increasing percentages. and with transform: translate we just added the Wave Text Effect animation perfectly by giving some specific values to it.
```
.logo.is-animetion {
  span:nth-of-type(1){ animation-delay: 0.0s; }
  span:nth-of-type(2){ animation-delay: 0.1s; }
  span:nth-of-type(3){ animation-delay: 0.2s; }
  span:nth-of-type(4){ animation-delay: 0.3s; }
  span:nth-of-type(5){ animation-delay: 0.4s; }
}

@keyframes wave-text{
  00%{
    transform: translateY(0em);
  }
  60%{
    transform: translateY(-0.6em);
  }
  100%{
    transform: translateY(0em);
  }
}
```
Now, We have successfully created our project. So it's time to preview the project in the mentioned Output Section.

Now We have Successfully created our **[Wave Text Effect](https://www.codewithrandom.com/2022/09/06/wave-text-effect-using-html-css/)** Using Simple HTML and CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE - Qrac

WRITTEN BY - Ragunathan S