How to keep the final state of an animated element while the rest of t

Question

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

Answer 1

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>

Answer 2

To keep the final state of an animated element while the rest of the animation completes in CSS, you can use the animation-fill-mode property. By setting it to forwards, the element will retain the styles applied during the last keyframe of the animation

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example-animation;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes example-animation {
  0% { opacity: 0; }
  100% { opacity: 1; transform: translateX(200px); }
}

the .box element will start with an opacity of 0 and move 200 pixels to the right over a duration of 2 seconds. The animation-fill-mode: forwards; ensures that once the animation completes, the element will retain the styles defined in the last keyframe (100% state). In this case, the final state is an opacity of 1 and a translation of 200 pixels to the right.

By default, animation-fill-mode is set to none, which means the element will revert to its original state after the animation completes. Setting it to forwards keeps the final state.

Note that animation-fill-mode only affects the element once the animation finishes. If you want to keep the final state of an element while the rest of the animation is still in progress, you may need to consider using JavaScript or a JavaScript animation library to manually apply the styles at a specific point in the animation.

Answer 3

.element {
  animation-name: example-animation;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes example-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

the animation-fill-mode property is set to forwards, which means that the element will retain the final state of the animation after it completes. In this case, the final state is the translation of 100px along the X-axis You can adjust the animation-duration and animation-name properties to fit your specific animation. 
Remember to include the keyframes for your animation using the @keyframes rule.