How to create Text Wave animation in CSS? Just follow the steps below.

Hey guys, It’s been a long time since I last updated this blog. Reasons were that I got bored and was not getting any pageviews or anything. Anyways, let’s hope that I’ll be able to update it on a regular basis.

So, today I’m gonna do a Text Wave Animation, it’s similar to the Breathing Text Animation we did a few weeks ago. It’s only gonna use CSS, no javascript is needed.

Let’s check out the preview on how it’s gonna look like.

Preview of Text Wave Animation.

You might also like these.

How to make Text Wave Animation?

Text Wave Animation

It’s pretty simple, just 2 files, one for HTML and other for SCSS.

Inside the HTML part, we will first create 6 list elements <li> since it has 6 layers of text that superimpose each other.

CSS part.

Inside the CSS, we will do some general stuff like text-weight, height etc. After that using SCSS variable stuff, we will make it animate. It’s pretty complex and not easy to explain. Check out the code below and ask if there is any problem.

Source code.

HTML

<!DOCTYPE html>
<!-- code by EvilWebDev -->
<html>
<head>
  <meta charset="UTF-8">
  <title> Text Wave Animation | Evil WebDev</title>
      <link rel="stylesheet" href="style.scss">
</head>
<body>
  
<!-- Please typing your favorite word!-->
<div id="ui">
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  <div class="text">ocean</div>
</div>
  
</body>
</html>

CSS

// Please change your favorite font-size!
$fontSize: 10rem;



body {
  background: #000;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 500px;
}

div {
  will-change: transform;
}

#ui {
  transform-style: preserve-3d;
  .text {
    position: absolute;
    font-size: $fontSize;
    color: #fff;
    line-height: $fontSize;
    font-family: 'Anton', sans-serif;
    padding: 20px 0;
    mix-blend-mode: screen;
    transform-style: preserve-3d;
    @for $i from 1 through 26 {
      $key: $i - 1;
      $param: 5;
      &:nth-child(#{$i}) {
        clip-path: polygon(
          -30% + ($key * $param) 0,
          -20% + ($key * $param) 0,
          20% + ($key * $param) 100%,
          0% + ($key * $param) 100%
        );
        animation: wave 2000ms $key * 200 - 10000ms ease-in-out infinite alternate;
      }
    }
  }
}

@keyframes wave {
  0% {
    transform: translate(-50%, -50%) scale(0.9) rotateX(20deg) rotateY(20deg);
    color: rgba(0, 30, 100, 1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1) rotateX(0deg) rotateY(0deg);
    color: rgba(50, 230, 255, 1);
  }
}

So this is how we can make it work, below is it’s codepen.

CodePen

See the Pen Only CSS: Text Wave by Kamran Tahir (@EvilSpark) on CodePen.

unsplash-logoDaniele Levis Pelusi
0 CommentsClose Comments

Leave a comment