javascript - Pourquoi mon paramètre de mode de remplissage d'animation ne prend-il pas effet

Question

.gold_egg_broken{ {code...} } @-webkit-keyframes eggbroken { {code...} } Basculez dynamiquement ce style sur un élément et souhaitez qu'il reste sur la dernière image et reste inchangé. Mais ça ne prend pas effet

阿神 · Answer

Supprimez le préfixe webkit et modifiez-le comme suit :

.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);
}

Étant donné que l'attribut d'animation fonctionne, cela signifie que les attributs associés n'ont pas besoin d'être préfixés dans ce navigateur. animation是一个综合属性，默认的animation-fill-mode是none，使用带前缀的属性webkit-animation-fill-mode不能覆盖掉animation-fill-mode, le préfixe doit donc être supprimé.

PHP中文网 · Answer

Merci pour l'invitation,
@luckness l'a dit très clairement.
De plus, les préfixes tels que webkit doivent être compatibles avec différentes versions de différents navigateurs.
Une manière plus conservatrice de l'écrire peut être :

.

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