Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

Text Wave Effect in CSS Only

Ashfaq Ahmed by Ashfaq Ahmed
April 19, 2022
in CSS Animation
0
Text Wave Effect in CSS Only
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

The CSS animation quite trending now days and front-end developers love to use to make their design unique. This tutorial is all about creating a wave text effect using CSS3 animation.

You can apply this effect on any text on your website. You can easily implement on paragraph or heading text. The animation give a nice looking dancing effect which look like a waves.

For the purpose of creating wave animation is with the help of CSS3 animation and key-frames.

Create HTML Structure

Let’s start with HTML and define a div class name “waveTextAnimated“. Within the div we will put five span tags and each one hold one word from the text. In case your text longer then you need to define more span tags according to your text.

<div class="waveTextAnimated">
  <span>W</span>
  <span>A</span>
  <span>V</span>
  <span>E</span>
  <span>S</span>
</div>

Apply CSS On Wave Effect Text 

Before apply the animation, we must need to do some alignment so the text look nice. So we will simply apply the font-size and text-align. Of-course, you can adjust it according to your need.

.waveTextAnimated {
    margin-top: 0.6em;
    font-size: 50px;
    text-align: center;
}

Next, we need to apply some general style to span tag. With the help of display property we will able to inline the each word. Moreover, we will also apply the animation and define its property wave-text. This wave-text will be next handle with the help of keyframes.

.waveTextAnimated span {
  display: inline-block;
  -webkit-animation: wave-text 1s ease-in-out infinite;
          animation: wave-text 1s ease-in-out infinite;
}

The important part of CSS start from here. As we have five words in our text so we will define five selectors that will help us to select the element of span siblings.

Each one further apply the animation-delay with different values in seconds so the text will wave.

.waveTextAnimated span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.waveTextAnimated span:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.waveTextAnimated span:nth-of-type(3) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.waveTextAnimated span:nth-of-type(4) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.waveTextAnimated span:nth-of-type(5) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

Finally we will create the wave-text animation by using the keyframes. We will transform the text on the Y-axis so we will set the translateY and set the value.

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

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

That’s it and you are done. You can easily adjust the animation according to your need. Even you can slow down or fast the waves by changing the animation-delay: 0.1s;

Conclusion

This tutorial is an easy way to create a wave text effect using CSS3 animation. We have seen the effect in action on our demo website. You can easily implement on your own website.

Tags: Text Effect
Demo Download
Previous Post

Animated Text Fill Animation in CSS

Next Post

HTM / CSS 3D Text Effect | Text Shadows Animation

Next Post
HTM CSS 3D Text Effect

HTM / CSS 3D Text Effect | Text Shadows Animation

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
Hexagonal CSS Grid

Auto Adjustable Hexagonal CSS Grid

December 17, 2019
CSS Glow Button Hover Effect

Pure CSS Button Shine/Glow Effect on Hover

December 23, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.