web-dev-qa-db-fra.com

Maintien de l'état final à la fin d'une animation CSS3

J'exécute une animation sur certains éléments définis sur opacity: 0; dans le fichier CSS. La classe d'animation est appliquée onClick et, à l'aide d'images clés, elle modifie l'opacité de 0 à 1 (entre autres).

Malheureusement, lorsque l'animation est terminée, les éléments retournent à opacity: 0 (dans Firefox et Chrome). Ma pensée naturelle serait que les éléments animés maintiennent l’état final en remplaçant leurs propriétés originales. N'est-ce pas vrai? Et si non, comment puis-je obtenir l'élément pour le faire?

Le code (versions préfixées non incluses):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}
csscss3css-animations
251
Dan

Essayez d'ajouter animation-fill-mode: forwards;. Par exemple comme ceci:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
452
Christofer Vilander

Si vous utilisez plusieurs attributs d'animation, le raccourci est le suivant:

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

pendant une durée de 2s, fonction de synchronisation linéaire, retard de 0.5s, 1 compte d'itérations, sens normal, mode de remplissage avant

20
agiopnl

SI N'UTILISE PAS LA VERSION DE MAIN COURTE: Assurez-vous que le animation-fill-mode: forwards est APRÈS la déclaration d'animation ou cela ne fonctionnera pas ...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

contre

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
8
Taylor A. Leach