Comprendre la propriété CSS d'animation-remplissage en mode

Points de base

• CSS animation-fill-mode Contrôle l'attribut comment le style est appliqué avant et après l'exécution de l'animation. none Les valeurs forwards backwards s'assurent qu'après la fin de l'animation, le style défini dans la dernière image clé de l'animation reste sur l'élément au lieu d'être restauré dans le style original. both
• La valeur applique le style de la première image clé à l'élément pendant tout retard avant le début de l'animation. forwards La valeur
• combine les effets de backwards et
, en appliquant le style de la première image clé avant le début de l'animation et en conservant le style de la dernière image clé après la fin de l'animation.
• both forwards Presque tous les développeurs frontaux ont utilisé des animations basées sur les immeubles clés CSS. Certaines personnes peuvent même créer des démonstrations et expériences assez complexes avec cette fonctionnalité. backwards
Si vous avez besoin d'une introduction complète au sujet, mon article sur Smashing Magazine en 2011 est toujours un bon choix. Cependant, dans cet article, je veux me concentrer sur un composant de la spécification d'animation CSS: l'attribut

.

Il s'agit de la seule propriété basée sur l'animation qui n'est pas facile à comprendre. Par exemple, personne ne sera confus à propos de

, animation-fill-mode, etc ... mais que signifie exactement le "mode de remplissage"? Réfléchissons brièvement et donnons quelques exemples.

animation-name animation-duration grammaire

Vous savez peut-être déjà que les animations de base de l'image clé sont définies à l'aide de la règle fill-mode. Cependant, à moins que vous n'associiez l'image clé au nom de l'animation, l'image clé ne fonctionnera pas. Ceci est une déclaration d'attribut d'animation abrégé, vous pouvez comprendre ce que je veux dire:

Bien sûr, l'abréviation de cette même ligne peut être étendue à: @keyframes

<code class="language-css">.example {
  animation: myAnim 2s 500ms 2 normal ease-in forwards;
}</code>

Dans les deux exemples, l'attribut

est défini en dernier, et dans les deux cas, la valeur est définie sur "

". Nous n'avons pas à le définir à la fin, mais cela peut être une bonne pratique.

<code class="language-css">.example {
  animation-name: myAnim;
  animation-duration: 2s;
  animation-delay: 500ms;
  animation-iteration-count: 2;
  animation-direction: normal;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}</code>

De même, même si vous n'avez jamais utilisé d'animations CSS, vous pourrez peut-être comprendre ce que tout dans l'instruction ci-dessus fait-sauf animation-fill-mode. forwards La définition normative de

animation-fill-mode

Alors, comment les spécifications disent-elles à propos de cet attribut?

L'attribut fill-mode définit les valeurs appliquées en dehors du temps d'exécution de l'animation.

Comme il continue d'expliquer, le temps "Time d'exécution extérieur" fait spécifiquement référence au temps entre le moment où l'animation est appliquée à un élément et le moment où l'élément commence réellement à une animation. Fondamentalement, en utilisant la valeur fill-mode, vous pouvez définir l'apparence de l'élément d'animation en dehors du temps d'exécution de l'animation mais après l'application de l'animation. Cela peut sembler déroutant, mais vous comprendrez bientôt ce que je veux dire.

élargissons cette définition de base en examinant chaque valeur possible (ce qui peut toujours être un peu déroutant).

Valeur de décomposition

L'attribut

animation-fill-mode peut accepter l'une des quatre valeurs: none, forwards, backwards, ou both. Voici une ventilation de chaque valeur.

Valeur: none

Il s'agit de la valeur initiale ou par défaut de animation-fill-mode. La définition de la valeur none sera redondante, sauf si vous le définissez via JavaScript pour le changer à partir d'autres valeurs, ou que vous remplacez quelque chose dans la cascade.

pour comprendre ce que fait la valeur none, voici une démonstration de codepen montrant une animation sans animation-fill-mode (donc sa valeur est none):

[lien de démonstration de codepen (veuillez le remplacer par le lien réel)]

Vous pouvez voir que dans la plupart des cas, le mode de remplissage de none n'est pas ce que vous voulez. N'oubliez pas que fill-mode définit à quoi ressemble un élément en dehors du temps d'exécution de l'animation.

Dans cet exemple, la balle est initialement rouge, puis devient progressivement rose tout en se déplaçant vers la taille droite et changeant en même temps. Il serait préférable que le ballon reste petit, rose et juste après la fin de l'animation. Cela empêchera le saut laid à l'état de départ une fois l'animation terminée.

Valeur: forwards

Changeons l'animation de la balle en fill-mode La valeur est "forwards":

[lien de démonstration de codepen (veuillez le remplacer par le lien réel)]

Maintenant, vous pouvez voir les avantages de l'utilisation animation-fill-mode et pourquoi la valeur forwards est utilisée plus que toute autre valeur. Lorsque nous le définissons avec cette valeur, nous disons au navigateur que nous voulons que l'élément d'animation conserve son ensemble de style final, tel que défini dans la dernière image clé. De cette façon, nous ne revenions pas à l'état initial avant que l'élément ne démarre l'animation une fois l'animation terminée (le bouton "réinitialiser" que j'ai ajouté dans la démo peut le faire pour nous).

Valeur: backwards

Changeons la valeur en backwards - Que se passe-t-il maintenant?

[lien de démonstration de codepen (veuillez le remplacer par le lien réel)]

Notez que le comportement dans cette démo est exactement le même que la première démo avec une valeur animation-fill-mode de "none". Pourquoi cela se produit-il?

Contrairement à forwards, la valeur backwards donne à l'élément son style avant le début de l'animation après la fin de l'animation. Cela a plus de sens lorsque nous voyons la description de la spécification de la valeur backwards:

Pendant la période définie par animation-delay, l'animation appliquera la valeur d'attribut définie dans l'image clé où la première itération de l'animation sera initiée. Ce sont les valeurs de l'image clé from ... ou les valeurs de l'image clé to.

pour le démontrer, j'ai apporté deux modifications à la démonstration:

• a ajouté une image clé from pour utiliser différentes couleurs pour la balle.
• Les retards d'ajout ont été ajoutés à l'aide de l'attribut animation-delay.

c'est ici:

[lien de démonstration de codepen (veuillez le remplacer par le lien réel)]

Maintenant, vous pouvez voir qu'une fois que vous appuyez sur le bouton "Démarrer l'animation", la balle deviendra bleue. C'est à cause du retard évident. Techniquement, chaque animation a un retard par défaut, mais le retard est de 0 s, donc dans ce cas, vous ne verrez pas vraiment la valeur de backwards si votre style dans l'image clé initiale est versus avant le début de l'animation, le style est le même, Et vous ne le verrez certainement pas non plus. Si vous utilisez le même style et le même retard, la suppression de la valeur backwards entraîne le début de la balle avant le début de l'animation.

Pour être honnête, je n'ai pas vraiment vu beaucoup d'utilisations pratiques de la valeur backwards. Il est difficile d'imaginer que dans trop de cas, le style dans la première image clé d'une animation est différent de l'état statique avant l'animation de l'élément. Mais si vous avez des idées, j'aimerais écouter certains cas d'utilisation.

Valeur: both

La dernière valeur que nous allons afficher est la valeur both. Cette valeur indique au navigateur d'appliquer l'effet de forwards et backwards.

Gardons le même style dans la démo et voyons ce qui se passe lorsque nous l'avons attribué à la valeur both:

[lien de démonstration de codepen (veuillez le remplacer par le lien réel)]

pas de la science des fusées. Comme vous pouvez le voir, pendant le retard initial, le style initial de l'image clé est appliqué, et l'animation se termine et le style de la dernière image clé est gelé (comme mentionné précédemment, c'est généralement ce que vous voulez). Encore une fois, cette valeur ne serait pas très différente de l'utilisation de forwards sans le retard et les couleurs alternatives définies dans la première image clé.

Certaines précautions et conseils

Sur la base du contenu ci-dessus et de quelques détails dans les spécifications, ce qui suit est à noter:

• Bien que j'aie quelque peu minimisé l'importance des valeurs backwards et both, ces valeurs peuvent être utiles dans des animations complexes contrôlées par des scripts ou une entrée utilisateur. Les cas d'utilisation abondent (penser: jeux), mais uniquement par expérimentation et innovation.
• Lorsque la propriété animation-direction est définie sur reverse, les effets des valeurs forwards et backwards sont inversés. Si vous avez joué avec la démo, vous verrez comment cela fonctionne.
• Bien que je dise animation-fill-mode n'accepte que quatre valeurs, n'oubliez pas que vous pouvez également utiliser les valeurs d'attribut CSS Range.
• Dans les versions antérieures de la spécification, animation-fill-mode ne faisait pas partie des propriétés d'animation d'abréviation, mais il semble que tous les navigateurs qui prennent en charge les images clés peuvent l'utiliser pour l'abréviation.
• Lorsque vous utilisez l'abréviation de l'animation et la sélection d'un nom personnalisé pour l'animation, n'utilisez pas de noms qui correspondent à la valeur valide fill-mode (comme "reverse" ou "forwards"), sinon le navigateur analysera le Déclaration d'abréviation, en supposant que le nom est en fait une valeur fill-mode.

Conclusion

J'espère que ce résumé vous aidera à mieux comprendre cette propriété. Certaines recherches m'ont vraiment aidé à mieux le comprendre. Si vous avez fait quelque chose d'unique à propos de animation-fill-mode ou que vous avez des cas d'utilisation uniques pour différentes valeurs, ou si vous avez des corrections à cet article, veuillez nous en informer dans la discussion.

FAQ sur les propriétés du mode de remplissage d'animation CSS

CSS animation-fill-mode Quelle est la signification des attributs?

CSS animation-fill-mode Les propriétés sont des aspects clés de l'animation CSS. Il définit comment une animation applique des styles à sa cible avant et après l'exécution. Cette propriété aide à contrôler l'état des éléments intermédiaires pendant l'animation. Il peut prendre quatre valeurs: none, forwards, backwards et both. Chaque valeur détermine comment l'animation affecte les éléments à différentes étapes, donnant ainsi aux développeurs un plus grand contrôle sur l'animation.

Comment fonctionne la valeur

dans animation-fill-mode forwards?

La valeur

CSS animation-fill-mode dans l'attribut garantit que l'élément conserve l'ensemble de valeur calculée pour le dernier immeuble clé rencontré pendant le processus d'animation. Cela signifie qu'après la fin de l'animation, le style défini dans la dernière image clé restera sur l'élément au lieu d'être restauré au style original. forwards

pouvez-vous expliquer la valeur de

dans animation-fill-mode? backwards

CSS

La valeur dans la propriété animation-fill-mode applique le style de la première image clé à l'élément pendant la période avant le début de l'animation. Cela signifie que s'il y a un retard avant le début de l'animation, l'élément prendra le style défini dans la première image clé pendant ce retard. backwardsQue signifie la valeur de

dans animation-fill-mode both?

La valeur

dans l'attribut animation-fill-mode CSS both combine les effets de forwards et backwards. Cela signifie appliquer le style de la première image clé avant le début de l'animation et conserver le style de la dernière image clé une fois l'animation terminée.

Que se passe-t-il lorsque la propriété animation-fill-mode est définie sur none?

Lorsque la propriété CSS animation-fill-mode est définie sur none, l'animation n'applique aucun style à l'élément avant ou après le début. Les éléments ne sont affectés que par l'animation lors du fonctionnement actif de l'animation.

Puis-je utiliser plusieurs valeurs pour l'attribut animation-fill-mode?

Non, l'attribut CSS animation-fill-mode ne peut prendre qu'une seule valeur à la fois. Vous pouvez sélectionner parmi none, forwards, backwards ou both en fonction des exigences spécifiques de l'animation.

Tous les navigateurs prennent en charge les attributs animation-fill-mode?

CSS animation-fill-mode Les propriétés sont largement prises en charge dans tous les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Cependant, il n'est pas pris en charge dans Internet Explorer.

animation-fill-mode Comment les attributs interagissent-ils avec animation-delay les attributs?

CSS animation-fill-mode Les propriétés fonctionnent avec les propriétés animation-delay. Si animation-fill-mode est défini sur backwards ou both et animation-delay est présent, le style de la première image clé est appliqué pendant le retard.

animation-fill-mode Les attributs peuvent-ils être utilisés avec des images clés avec des valeurs de pourcentage?

Oui, l'attribut CSS animation-fill-mode peut être utilisé avec des images clés avec des valeurs de pourcentage. Les valeurs forwards et backwards appliqueront le style des 0% les plus proches et 100% des images clés, respectivement.

animation-fill-mode Quelle est la valeur par défaut de l'attribut?

La valeur par défaut de l'attribut

CSS animation-fill-mode est none. Cela signifie que par défaut, l'animation n'applique aucun style à l'élément avant ou après le début.

Veuillez noter que j'ai remplacé le lien Codepen avec un espace réservé. Vous devez fournir un lien de démonstration Codepen réel pour terminer l'article.

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!