Comment puis-je contrôler le comportement de l'animation CSS3 une fois terminée ?

Contrôle du comportement final de l'animation CSS3

Lors de la création d'animations CSS3 attrayantes, il est souvent nécessaire de contrôler leur comportement une fois terminées. Une exigence courante consiste à geler une animation sur sa dernière image.

Gelage de l'animation sur la dernière image

Le code fourni montre une animation en quatre parties qui se termine en retirant l'élément cible de l'écran. Cependant, il revient à plusieurs reprises à son état d'origine après son exécution. Pour résoudre ce problème, nous pouvons utiliser la propriété animation-fill-mode.

animation-fill-mode: forwards;

En définissant cette propriété sur forwards, l'animation restera dans son état final une fois terminée. L'élément apparaîtra figé sur la dernière image (100%) de l'animation.

Alternativement, si vous souhaitez supprimer entièrement l'élément de la page après l'animation, vous pouvez appliquer l'approche suivante :

-webkit-animation-end: animation_final_frame;

Ici, animation_final_frame est le nom d'une fonction CSS qui serait exécutée à la fin de l'animation. Dans cette fonction, vous pouvez ajouter une logique pour supprimer l'élément du DOM à l'aide de JavaScript ou de jQuery.

Informations sur le mode de remplissage d'animation

Pour plus de détails sur le mode de remplissage d'animation, reportez-vous au développeur Mozilla. Réseau (MDN) ou consultez la liste de support des navigateurs sur CanIuse.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!