Maintain final effect of Animation css

Question

I’m doing a loading screen and at the end of the effect, the css value that should be maintained, is the value that is in 100% of the Animation, only when the effect ends, it goes back to the initial css.

How do I perform the effect and maintain the value that is in 100%?

Css:

.loading_home_logo {
  position: absolute;
  right: 0px;
  top: -70px;
  animation: move-logo 4s;
}
@keyframes move-logo {
  0% {
    right: inherit;
    top: -10vh
  }
  50% {
    top: -40vh;
    left: 50%;
  }
  100% {
    top: -50vh;
    right: inherit;
    left: 0;
  }
}

Answer 1

You have to use the animation-fill-mode to stop the animation at the end. In case it would be this property with the value forwards, would be so: animation-fill-mode:forwards

See here the options: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

Follow a sismples example for you to understand. See that in the end the element does not go back to the beginning, but the animation only happens once... sand you want it to repeat itself use the property animation-iteration-count https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

.loading_home_logo {
    width: 100px;
    height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: red;
  animation: move-logo 2s;
  /* animation-iteration-count: 3; */
  animation-fill-mode: forwards;
}
@keyframes move-logo {
    0% {
        left: 0;
        background-color: red;
    }
    100% {
        left: 200px;
        background-color: blue;
    }
}

<div class="loading_home_logo">123</div>