CODEWITHSUNDEEP
htmlcsscss-animations
Ayesh Nipun
Ayesh Nipun

Reputation: 614

How to keep the final state of an animated element while the rest of the animation completes in CSS

I'm trying to create an animation like below

enter image description here

Description of the animation.

  1. Red bar's height increases to 50px.
  2. While the red bar remains at its height, set by step 1, the yellow bar height increases to 100px.
  3. While the yellow bar remains at its height, set by step 2, the green bar height increases to 75px.
  4. While the green bar remains at its height, set by step 3, the next and final green bar height increases to 75px.

The problem is I can't get the bar to stay at its height. So I have made another animation which is somewhat the same, but not 100%. It's below.

enter image description here

.equilizer {
  height: 100px;
  width: 100px;
  transform: rotate(180deg);
}

.bar {
  width: 18px;
}

.bar-1 {
  animation: equalize4 1.5s 0s infinite;
}

.bar-2 {
  animation: equalize3 1.5s 0s infinite;
}

.bar-3 {
  animation: equalize2 1.5s 0s infinite;
}

.bar-4 {
  animation: equalize1 1.5s 0s infinite;
}

@keyframes equalize1 {
  0% {
    height: 0%;
  }
  100% {
    height: 25%;
  }
}

@keyframes equalize2 {
  0% {
    height: 0%;
  }
  100% {
    height: 50%;
  }
}

@keyframes equalize3 {
  0% {
    height: 0%;
  }
  100% {
    height: 37.5%;
  }
}

@keyframes equalize4 {
  0% {
    height: 0%;
  }
  100% {
    height: 37.5%;
  }
}
<svg xmlns="http://www.w3.org/2000/svg" class="equilizer" viewBox="0 0 128 128">
  <g>
    <title>Audio Equilizer</title>
    <rect class="bar bar-1" transform="translate(0,0)" y="15" rx="10" fill="#416031"></rect>
    <rect class="bar bar-2" transform="translate(25,0)" y="15" rx="10" fill="#416031"></rect>
    <rect class="bar bar-3" transform="translate(50,0)" y="15" rx="10" fill="#e5a32b"></rect>
    <rect class="bar bar-4" transform="translate(75,0)" y="15" rx="10" fill="#ad1e23"></rect>
  </g>
</svg>

How can I achieve the above (Image 1) result?

Upvotes: 0

Views: 70

Answers (2)

tao
tao

Reputation: 90013

Is this what you're looking for?

.equilizer {
  height: 100px;
  width: 100px;
  transform: rotate(180deg);
}

.bar {
  width: 18px;
}

.bar-1 {
  animation: equalize4 3s infinite;
}

.bar-2 {
  animation: equalize3 3s infinite; 
}

.bar-3 {
  animation: equalize2 3s infinite;
}

.bar-4 {
  animation: equalize1 3s infinite;
}


@keyframes equalize1 {
  0% {
    height: 0%;
  }
  20% {
    height: 25%;
  }
  95% {
    height: 25%
  }
  100% {
    height: 0
  }
}

@keyframes equalize2{
  0% {
    height: 0;
  }
  20% {
    height: 0
  }
  40% {
    height: 50%;
  }
   95% {
    height: 50%
  }
  100% {
    height: 0
  }
}

@keyframes equalize3{
  0% {
    height: 0%;
  }
  40% {
    height: 0
  }
  60% {
    height: 37.5%
  }
  95% {
    height: 37.5%;
  }
  100% {
    height: 0
  }
}

@keyframes equalize4{
  0% {
    height: 0%;
  }
  60% {
    height: 0;
  }
  80% {
    height: 37.5%
  }
  95% {
    height: 37.5%;
  }
  100% {
    height: 0
  }
}
<svg xmlns="http://www.w3.org/2000/svg" class="equilizer" viewBox="0 0 128 128">
  <g>
    <title>Audio Equilizer</title>
    <rect class="bar bar-1" transform="translate(0,0)" y="15" rx="10" fill="#416031"></rect>
    <rect class="bar bar-2" transform="translate(25,0)" y="15" rx="10" fill="#416031"></rect>
    <rect class="bar bar-3" transform="translate(50,0)" y="15" rx="10" fill="#e5a32b"></rect>
    <rect class="bar bar-4" transform="translate(75,0)" y="15" rx="10" fill="#ad1e23"></rect>
  </g>
</svg>

The simple answer is: you have to take all animations into account, as a single animation. That's your animation loop.

Upvotes: 1

Maverick Fabroa
Maverick Fabroa

Reputation: 1173

Just add an animimation-delay to the bars and maintain final state (height) of the bars:

.equilizer {
  height: 100px;
  width: 100px;
  transform: rotate(180deg);
}

.bar {
  width: 18px;
}

.bar-1 {
  animation: equalize4 1.5s 0s infinite;
  animation-delay: 1.25s;
}

.bar-2 {
  animation: equalize3 1.5s 0s infinite; 
  animation-delay: 1s;
}

.bar-3 {
  animation: equalize2 1.5s 0s infinite;
  animation-delay: .75s;
}

.bar-4 {
  animation: equalize1 1.5s 0s infinite;
  animation-delay: .5s;
}


@keyframes equalize1 {
  0% {
    height: 0%;
  }
  50% {
    height: 25%;
  }
  100% {
    height: 0%;
  }
}

@keyframes equalize2{
  0% {
    height: 0%;
  }
  50% {
    height: 50%;
  }
  100% {
    height: 0%;
  }
}

@keyframes equalize3{
  0% {
    height: 0%;
  }
  50% {
    height: 37.5%;
  }
  100% {
    height: 0%;
  }
}

@keyframes equalize4{
  0% {
    height: 0%;
  }
  50% {
    height: 37.5%;
  }
  100% {
    height: 0%;
  }
}
<svg xmlns="http://www.w3.org/2000/svg" class="equilizer" viewBox="0 0 128 128">
  <g>
    <title>Audio Equilizer</title>
    <rect class="bar bar-1" transform="translate(0,0)" y="15" rx="10" fill="#416031"></rect>
    <rect class="bar bar-2" transform="translate(25,0)" y="15" rx="10" fill="#416031"></rect>
    <rect class="bar bar-3" transform="translate(50,0)" y="15" rx="10" fill="#e5a32b"></rect>
    <rect class="bar bar-4" transform="translate(75,0)" y="15" rx="10" fill="#ad1e23"></rect>
  </g>
</svg>

Here is the codepen: https://codepen.io/mavyfaby/pen/eYKJyON

Upvotes: 0

Related Questions