Conserver l'animation CSS dans son état final à la fin

Question

J'anime certains éléments définis sur opacity: 0; Une classe d'animation est appliquée à l'événement onClick, à l'aide d'images clés, qui modifie l'opacité de 0 à 1 (et quelques autres modifications).

Malheureusement, lorsque l'animation se termine, l'élément revient à un état opacité : 0 (dans Firefox et Chrome). Mon instinct est que les éléments animés resteront dans leur état final, annulant leurs propriétés d'origine. N'est-ce pas vrai ? Si non, comment puis-je conserver l’élément dans son état final ?

Code (hors versions de préfixe) :

@keyframes bulle {
    0% { transformation:échelle(0,5); opacité:0,0 }
    50 % { transformation : échelle (1,2); opacité : 0,5 ;
    100 % { transformation : échelle (1.0); opacité : 1.0 ;
}

            

Answer 1

Si vous utilisez plus de propriétés d'animation, vous pouvez utiliser shorthand  :

animation: bubble 2s linear 0.5s 1 normal forwards;

Réglez-le comme ceci :

• bubble Nom de l'animation
• 2s Durée
• linear Fonction heure
• 0.5s Retard
• 1 迭代次数（可以是 'infinite')
• normal direction
• forwards mode de remplissage (réglé sur « en arrière » si vous souhaitez une compatibilité avec l'utilisation de la position finale comme état final [c'est pour prendre en charge les navigateurs avec les animations désactivées] {juste pour répondre au titre, pas à votre cas spécifique})

Fonctions horaires disponibles :

ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end

Itinéraires disponibles :

normal | reverse | alternate | alternate-reverse

Answer 2

Essayez d'ajouter animation-fill-mode: forwards;. Par exemple, vous pouvez utiliser des abréviations comme celle-ci :

animation: bubble 1.0s forwards;

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