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

J'ai eu un problème en utilisant forwards Dans le cas de Chrome, même après la fin de l'animation, le moteur de rendu continuait à consommer des ressources graphiques, ce qui rendait l'application moins réactive.

Une approche qui ne pose pas ce problème est l'utilisation d'un fichier de type EventListener .

Les animations CSS émettent des événements, de sorte que vous pouvez utiliser la fonction fin d'animation pour intervenir lorsque l'animation se termine.

CSS

.fade_in {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

JavaScript

const element = document.getElementById("element-to-be-animated");

element.addEventListener("animationend", () => {
    // Set your final state here. For example:
    element.style["opacity"] = 1;
}, { once: true });

L'option once: true indique au moteur de supprimer le récepteur d'événements après son exécution, laissant votre application fraîche et propre.

J'ai créé un JSFiddle pour montrer comment cela fonctionne.