CODEWITHSUNDEEP
htmlcsscss-animations
LCTS
LCTS

Reputation: 286

Making a wave animation

I am trying to make audio wave animation. What is wrong with this code? I tried to change translate to scale but it didn't work. Could someone give me a link to some exercises of animation?

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
div {
  width: 400px;
  height: 200px;
  margin: 50px auto;
}
span {
  display: inline-block;
  background-color: green;
  width: 20px;
  height: 20px;
  animation: wave 2s linear infinite;
}
.a1 {
  animation-delay: 0s;
}
.a2 {
  animation-delay: .2s;
}
.a3 {
  animation-delay: .4s;
}
.a4 {
  animation-delay: .6s;
}
.a5 {
  animation-delay: .8s;
}
@keyframes wave {
  0%, 50%, 75%, 100% {
    height: 5px;
    transform: translateY(0px);
  }
  25% {
    height: 30px;
    transform: translateY(15px);
    background-color: palevioletred;
  }
}
<div>
  <span class="a1"></span>
  <span class="a2"></span>
  <span class="a3"></span>
  <span class="a4"></span>
  <span class="a5"></span>
</div>

wave , code is working but it does not appear as a wave

Upvotes: 6

Views: 5344

Answers (1)

web-tiki
web-tiki

Reputation: 103780

You can remove the up and down movement of the elements by animating the transform property instead of the height of the elements.

You can use the scaleY() function to make the elements grow on the Y axis (height).

Example :

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
div {
  width: 400px;
  height: 200px;
  margin: 50px auto;
}
span {
  display: inline-block;
  background-color: green;
  width: 20px;
  height: 20px;
  animation: wave 2s linear infinite;
}
.a1 {
  animation-delay: 0s;
}
.a2 {
  animation-delay: .2s;
}
.a3 {
  animation-delay: .4s;
}
.a4 {
  animation-delay: .6s;
}
.a5 {
  animation-delay: .8s;
}
@keyframes wave {
  0%, 50%{
    transform: scaleY(1);
  }
  25% {
    transform: scaleY(4);
    background-color: palevioletred;
  }
}
<div>
  <span class="a1"></span>
  <span class="a2"></span>
  <span class="a3"></span>
  <span class="a4"></span>
  <span class="a5"></span>
</div>

Upvotes: 6

Related Questions