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

harshita singh

3y1.2kCSS

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

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Accepted answer

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%;
  }
}

Deepak Rawat3y ago
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
```
.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.
0

Deepak Rawat3y ago

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