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

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"  viewBox="0 0 128 128">
  <g>
    <title>Audio Equilizer</title>
    <rect  transform="translate(0,0)" y="15" rx="10" fill="#416031"></rect>
    <rect  transform="translate(25,0)" y="15" rx="10" fill="#416031"></rect>
    <rect  transform="translate(50,0)" y="15" rx="10" fill="#e5a32b"></rect>
    <rect  transform="translate(75,0)" y="15" rx="10" fill="#ad1e23"></rect>
  </g>
</svg>

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

CodePudding user response：

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"  viewBox="0 0 128 128">
  <g>
    <title>Audio Equilizer</title>
    <rect  transform="translate(0,0)" y="15" rx="10" fill="#416031"></rect>
    <rect  transform="translate(25,0)" y="15" rx="10" fill="#416031"></rect>
    <rect  transform="translate(50,0)" y="15" rx="10" fill="#e5a32b"></rect>
    <rect  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.

CodePudding user response：

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"  viewBox="0 0 128 128">
  <g>
    <title>Audio Equilizer</title>
    <rect  transform="translate(0,0)" y="15" rx="10" fill="#416031"></rect>
    <rect  transform="translate(25,0)" y="15" rx="10" fill="#416031"></rect>
    <rect  transform="translate(50,0)" y="15" rx="10" fill="#e5a32b"></rect>
    <rect  transform="translate(75,0)" y="15" rx="10" fill="#ad1e23"></rect>
  </g>
</svg>

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