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

Question

I'm trying to create an animation like below

Description of the animation.

Red bar's height increases to 50px.
While the red bar remains at its height, set by step 1, the yellow bar height increases to 100px.
While the yellow bar remains at its height, set by step 2, the green bar height increases to 75px.
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.

.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?

Does this answer your question? [Maintaining the final state at end of a CSS3 animation](https://stackoverflow.com/questions/12991164/maintaining-the-final-state-at-end-of-a-css3-animation) — isherwood, Nov 01 '22 at 12:53
@isherwood I tried adding animation-fill-mode: forwards; but didn't work. — Ayesh Nipun, Nov 01 '22 at 12:56

score 1 · Accepted Answer · answered Nov 01 '22 at 13:14

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.

For more complex animations (e.g. timelines, where animations are triggered relative to another animation's end) use dedicated libs, such as [gsap](https://www.npmjs.com/package/gsap) — tao, Nov 01 '22 at 13:23

Maverick Fabroa · Answer 2 · 2022-11-01T13:05:52.053

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

@MaverickFabroa A good solution but unfortunately it's not the solution I need. As an example, the red bar should stay at its height while the animation ends. And only then, does the red bar animate again. Do you think that's possible in your solution? — Ayesh Nipun, Nov 01 '22 at 13:14

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

2 Answers2