Wave Text Effect Using HTML And CSS

Create Wave Text Animation Effect Using HTML And CSS Code

Create Wave Text Animation Effect Using HTML And CSS Code

Hi, guys Greetings, and thanks for visiting our blog. Today’s article will demonstrate how to make a Wave Text Animation Effect using basic HTML and CSS. Before that, it was clear what this project was all about.

 Wave Text Animation Effect Using HTML And CSS

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.

50+ HTML, CSS & JavaScript Projects With Source Code

Code byQrac
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNo
ResponsiveYes
Wave Text Effect Table

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.

Restaurant Website Using HTML and CSS

HTML Output:

 Wave Text Animation Effect Using HTML And CSS

10+ HTML CSS Projects For Beginners (Source Code)

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;
}

Simple Portfolio Website Using Html And Css With Source Code

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);
  }
}

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Now, We have successfully created our project. So it’s time to preview the project in the mentioned Output Section.

Video Output Of Wave Text Animation Using CSS:

Final Output Of Wave Text Animation Effect


Now We have Successfully created our  Wave Text Effect 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.

10+ Javascript Projects For Beginners With Source Code

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

Which code editor do you use for Wave Text Effect coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

No!



Leave a Reply