Now in Baseline: Animation des effets d'entrée

Una Kravets

L'article Quatre nouvelles fonctionnalités CSS pour les effets d'entrée et de sortie venait d'arriver dans Chrome. Désormais, deux de ces fonctionnalités, @starting-style et transition-behavior: allow-discrete, sont désormais disponibles en version de référence dans Firefox 129. Vous pouvez désormais créer des effets d'animation d'entrée pour des éléments, y compris ceux créés à partir de display: none, et s'animer dans la couche supérieure.

Configurer des effets d'entrée avec @starting-style

La règle @starting-style définit les styles initiaux d'un élément avant son rendu sur la page. Cette étape est obligatoire pour les éléments qui s'animent à partir de display: none, car ils ont besoin d'un état à partir duquel l'animation doit être définie.

Utilisez @starting-style comme n'importe quelle autre règle @ dans CSS, en y insérant les styles de l'élément. Par exemple, avec un <dialog>, placez les styles dialog[open] dans une règle @starting-style. Voici les styles utilisés avant l'ouverture de la boîte de dialogue.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

Activer des animations discrètes avec allow-discrete

La deuxième chose à faire pour permettre les animations d'entrée pour les éléments qui s'animent à partir de display: none, comme les boîtes de dialogue et les pop-overs, consiste à activer un nouveau mode d'animation, compatible avec l'animation des propriétés discrètes. Les propriétés discrètes sont celles qui ne peuvent pas interpoler les valeurs. Vous pouvez les considérer comme un interrupteur marche/arrêt. Exemples : display, visibility et mix-blend-mode (toute propriété dans laquelle la caractéristique est une valeur ou une autre). Avec ce nouveau mode d'animation, le navigateur prend désormais en charge le changement des valeurs au point de 50% plutôt qu'au point 0% d'une transition.

Utilisez l'une des deux méthodes suivantes pour animer les effets d'entrée pour les éléments display: none et visibility: hidden:

• La propriété autonome transition-behavior avec la valeur allow-discrete
• La valeur allow-discrete dans votre raccourci de transition.

Nous vous recommandons d'utiliser la seconde méthode, car l'application de transition-behavior est incluse dans le raccourci transition. Si vous appliquez transition-behavior: allow-discrete avant le raccourci de transition où vous appliquez les fonctions de transition, de minutage et de lissage de vitesse, le navigateur ignorera transition-behavior.

Si vous l'utilisez comme raccourci, vous ne devez appliquer le mot clé allow-discrete qu'aux propriétés spécifiques qui nécessitent des animations discrètes. Cela est illustré dans le CSS suivant, qui effectue une transition entre les propriétés translate et display, mais qui applique uniquement le mot clé allow-discrete à la propriété display.

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

Démonstration: tout mettre en place

Ces fonctionnalités sont particulièrement utiles pour les éléments de la couche supérieure, tels que l'élément <dialog> ou les composants qui utilisent l'attribut popover. Dans l'exemple suivant, un élément <dialog> est animé depuis le bas de la fenêtre d'affichage (initialement à partir d'une translation verticale de 100 vh hors écran) jusqu'au centre de la fenêtre d'affichage, supprimant la traduction lorsque <dialog> est ouvert.

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

Vous pouvez écrire ceci de manière plus concise avec l'imbrication CSS, qui est également une nouvelle fonctionnalité de référence.

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}

Conclusion

C'est passionnant de voir des progrès comme ceux-ci dans Baseline, et au moins, il s'agit d'une belle amélioration progressive pour ces éléments. Sans ces fonctionnalités d'effet d'entrée, les éléments qui s'animent dans le calque supérieur ou à partir d'un style display: none s'afficheront simplement sur votre page, sans transition, comme c'est le cas actuellement.

Pour découvrir comment ajouter des effets de sortie progressivement, consultez l'article Quatre nouvelles fonctionnalités CSS pour des animations d'entrée et de sortie fluides. Pour en savoir plus sur ces fonctionnalités, consultez les ressources de documentation suivantes:

• @starting-style sur MDN
• transition-behavior sur MDN