javascript - Why does my animation-fill-mode setting not take effect

Question

.gold_egg_broken{

background: url("../img/animation/goldeggBroke.png");
width: 400px;
height: 400px;
animation: eggbroken 3s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function: steps(80);

}

@-webkit-keyframes eggbroken {

0%{
    background-position: 0 0;
}
90%{
    background-position: 0 -32000px;
}
100%{
    background-position: 0 -32000px;
}

}

Dynamically switch to this style for an element and want it to stay on the last frame. But it doesn’t work

Answer 1

Remove the webkit prefix and modify it as follows:

.gold_egg_broken{
    background: url("../img/animation/goldeggBroke.png");
    width: 400px;
    height: 400px;
    animation: eggbroken 3s;
    animation-fill-mode:forwards;
    animation-timing-function: steps(80);
}

Since the animation attribute works, it means that the related attributes do not need to be prefixed in this browser. animation is a comprehensive attribute. The default animation-fill-mode is none. Using the prefixed attribute webkit-animation-fill-mode cannot override animation-fill-mode, so you need to Remove the prefix.

Answer 2

Thanks for the invitation,
@luckness has made it very clear.
In addition, prefixes such as webkit are to be compatible with different versions of different browsers.
A more conservative way of writing it can be:

p{
     -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
         -ms-animation-fill-mode: forwards;
          -o-animation-fill-mode: forwards;
             animation-fill-mode: forwards;
}