1

I want to add a simple keyframe-animation to an element by something like that:

.sw_intro{
    animation: introtop;
    animation-duration: 0.8s;
    animation-delay: 2s;
}

@keyframes introtop {
    from {margin-top: 0;}
    to {margin-top: 100vh;}
}

But I want the end of the animation to be the end status. So, after the animation ran, the margin-top shall be 100vh not 0vh, as it currently is.

What do I need to do therefore?

Thanks!

Daiaiai
  • 1,019
  • 3
  • 12
  • 28

1 Answers1

2

Add animation-fill-mode: forwards to .sw_intro

According to MDN animation-fill-mode is a CSS property that specifies how an animation should apply styles to its target before and after it is executing.

If you set the value forwards then after animation is executed styles from the last keyframes will be applied to the target.

Arkej
  • 2,221
  • 1
  • 14
  • 21
  • Whilst this code snippet is welcome, and may provide some help, it would be [greatly improved if it included an explanation](//meta.stackexchange.com/q/114762) of *how* and *why* this solves the problem. Remember that you are answering the question for readers in the future, not just the person asking now! Please [edit] your answer to add explanation, and give an indication of what limitations and assumptions apply. – Toby Speight Feb 16 '17 at 13:28