Keep CSS Animation final effect

Question

Keep CSS Animation final effect

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

How do I execute the effect and keep the value that is at 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;
  }
}

1

css css3 css-animations

Author: Maurício Krüger, 2019-04-01

Source

1 answers

score 1 · Accepted Answer

Vc has to use animation-fill-mode to stop the animation at the end. In the case that would be this property with the value forwards, it would be like this: animation-fill-mode:forwards

See Here the options: https://developer.mozilla.org/pt-BR/docs/Web/CSS/animation-fill-mode

Follows a sismples example for you to understand. See that at the end the element does not return to the beginning, but the animation only happens once... s and 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>