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

Question

J'exécute une animation sur certains éléments qui sont définis comme suit opacity: 0; dans le CSS. La classe d'animation est appliquée lors d'un clic et, à l'aide d'images clés, elle modifie l'opacité de la manière suivante 0 à 1 (entre autres).

Malheureusement, lorsque l'animation est terminée, les éléments reviennent à l'état de opacity: 0 (à la fois dans Firefox et dans Chrome). Je pense naturellement que les éléments animés conservent leur état final, en remplaçant leurs propriétés d'origine. N'est-ce pas le cas ? Et si ce n'est pas le cas, comment puis-je faire en sorte que l'élément le fasse ?

Le code (les versions préfixées ne sont pas 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; }
}

Answer 1

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;

Answer 2

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

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

Cela donne :

• bubble nom de l'animation
• 2s durée
• linear fonction de temporisation
• 0.5s retarder
• 1 le nombre d'itérations (peut être ' infinite ')
• normal direction
• forwards fill-mode (mettez 'backwards' si vous voulez avoir la compatibilité pour utiliser la position finale comme état final [ceci est pour supporter les navigateurs qui ont les animations désactivées] {et pour répondre seulement au titre, et pas à votre cas spécifique})

Answer 3

SI VOUS N'UTILISEZ PAS LA VERSION ABRÉGÉE : 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;

vs

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

Answer 4

Utilisez animation-fill-mode : forwards ;

animation-fill-mode: forwards;

L'élément conservera les valeurs de style définies par la dernière image clé (dépend de animation-direction et animation-iteration-count).

Remarque : la règle @keyframes n'est pas prise en charge par Internet Explorer 9 et les versions antérieures.

Exemple de travail

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

<h1>The keyframes </h1>
<div></div>

Answer 5

Vous pouvez également utiliser

animation-iteration-count: infinite;

à une autre animation que vous voulez préserver. Cependant, je crois que forwards comme indiqué dans l'autre réponse est préférable.