animation-fill-mode |
Remplir le mode de l'animation |
| CSS3 |
|
Syntaxe
|
animation-fill-mode: backwards|both|none|forwards|inherit|initial;
|
Paramètres
| Paramètre |
Description |
| backwards |
Ce paramètre permet d'indiquer qu'il faut appliquer les valeurs de propriétés définit de le keyframe débutant à la première itération d'une animation durant la période définit par une propriété «animation-delay». |
| both |
Ce paramètre permet d'indiquer que l'animation doit suivre les règles pour l'avant et l'arrière. |
| forwards |
Ce paramètre permet d'indiquer qu'il faut appliquer les valeurs de propriétés à chaque fois que l'animation se termine. |
| none |
Ce paramètre permet d'indiquer que l'animation n'applique pas de style à l'élément de destination avant ou après son exécution. C'est la valeur par défaut. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
Description
Cette propriété permet d'indiquer l'apparence de l'élément lorsque l'animation ne fonctionne pas.
Remarques
- Définition du comportement hors des cycles d'animation : La propriété animation-fill-mode contrôle l'état d'un élément avant et/ou après l'exécution d'une
animation. Elle permet de déterminer si les styles définis dans l'animation sont appliqués en dehors de son cycle actif.
- Valeur par défaut (none) : Par défaut, animation-fill-mode est défini sur none. Cela signifie qu'aucun style défini dans les étapes de l'animation
(@keyframes) n'est appliqué avant le début ou après la fin de l'animation. L'élément revient à son état initial après l'animation.
- Effet avec forwards : Lorsque la valeur est définie sur forwards, l'élément conserve les styles de la dernière étape de l'animation après la fin de son cycle.
Cela est utile pour s'assurer qu'un élément reste dans un état final particulier sans revenir à son style d'origine.
- Comportement avec backwards : La valeur backwards applique les styles de la première étape de l'animation (@keyframes) à l'élément dès le début, même si
l'animation est retardée par une valeur animation-delay. Cela donne l'impression que l'animation a commencé avant son démarrage effectif.
- Combinaison avec both : Avec la valeur both, les styles de la première étape (avant le début de l'animation) et de la dernière étape (après la fin) sont
appliqués. Cette option combine les comportements de forwards et backwards pour une gestion complète des états de l'élément.
- Amélioration de la continuité visuelle : En utilisant animation-fill-mode, on peut éviter des transitions brusques ou des "flashs" lorsque les styles de
l'animation ne s'appliquent plus après sa fin. Cela permet une meilleure continuité visuelle dans les interfaces utilisateurs.
- Impact avec animation-iteration-count : Lorsque animation-iteration-count est défini sur une valeur infinie (infinite), la propriété animation-fill-mode a
peu d'effet, car l'animation ne se termine jamais. Elle est donc surtout utile pour des animations avec un nombre fini d'itérations.
- Utilisation pour des animations complexes : Dans des animations multi-étapes, animation-fill-mode est particulièrement utile pour maintenir un élément dans
un état intermédiaire ou final. Par exemple, pour une animation d'ouverture de menu, forwards peut être utilisé pour que le menu reste ouvert une fois l'animation terminée.
Dernière mise à jour : Vendredi, le 1er janvier 2016
