Quatre nouvelles fonctionnalités CSS pour des animations d'entrée et de sortie fluides

Una Kravets

Joey Arhar

Le mouvement est un élément essentiel de toute expérience numérique. Il guide l'utilisateur d'une interaction à l'autre. Toutefois, les animations fluides sur la plate-forme Web présentent quelques lacunes. Vous pouvez par exemple animer facilement des animations d'entrée et de sortie, et animer de manière fluide vers et depuis la couche supérieure pour les éléments pouvant être ignorés, tels que les boîtes de dialogue et les pop-ups.

Pour combler ces lacunes, Chrome 116 et 117 incluent quatre nouvelles fonctionnalités de plate-forme Web, qui permettent d'animer et de faire des transitions fluides pour des propriétés distinctes.

Ces quatre nouvelles fonctionnalités sont les suivantes:

• Possibilité d'animer display et content-visibility sur une timeline d'images clés (à partir de Chrome 116).
• La propriété transition-behavior avec le mot clé allow-discrete pour activer les transitions de propriétés distinctes telles que display (à partir de Chrome 117).
• La règle @starting-style pour animer les effets d'entrée depuis display: none et dans la couche supérieure (depuis Chrome 117).
• La propriété overlay permet de contrôler le comportement de la couche supérieure pendant une animation (à partir de Chrome 117).

Afficher des animations dans des images clés

À partir de Chrome 116, vous pouvez utiliser display et content-visibility dans les règles de clés-images. Ils seront ensuite remplacés au moment de l'apparition de la clé-image. Aucune nouvelle valeur n'est requise pour cela :

.card {
  animation: fade-out 0.5s forwards;
}

@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

Remarque : Les autres propriétés discrètes changent d'état à 50 % de la fonction d'atténuation de la transition au cours de sa durée. Toutefois, display et content-visibility basculent au début de la transition (si vous créez une animation) ou à la fin de la transition (si vous créez une animation).

L'exemple précédent définit l'opacité sur 0 pendant 0,5 s, puis définit l'affichage sur "none". En outre, le mot clé forwards garantit que l'animation reste à son état final, de sorte que l'élément auquel elle est appliquée reste display: none et opacity: 0.

Cet exemple simple reprend le fonctionnement d'une transition (voir la démonstration dans la section relative à la transition). Toutefois, les transitions ne permettent pas de créer des animations plus complexes, comme dans l'exemple suivant :

.card {
  animation: spin-and-delete 1s ease-in forwards;
}

@keyframes spin-and-delete {
  0% {
    transform: rotateY(0);
    filter: hue-rotate(0);
  }
  80% {
    transform: rotateY(360deg);
    filter: hue-rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

L'animation spin-and-delete est une animation de sortie. Tout d'abord, la fiche tourne sur l'axe Y, subit une rotation de teinte, puis à 80% dans la timeline, son opacité passe de 1 à 0. Enfin, la carte passe de display: block à display: none.

Pour ces animations de sortie, au lieu de les appliquer directement à un élément, vous pouvez configurer un déclencheur pour les animations. Par exemple, en associant un écouteur d'événements à un bouton qui déclenche une classe pour appliquer l'animation, comme suit :

.spin-out {
   animation: spin-and-delete 1s ease-in forwards;
}

document.querySelector('.delete-btn').addEventListener('click', () => {
 document.querySelector('.card').classList.add('spin-out');
})

L'exemple ci-dessus présente désormais un état final défini sur display:none. Dans de nombreux cas, vous souhaiterez aller plus loin et supprimer le nœud DOM avec un délai avant expiration pour permettre à l'animation de se terminer en premier.

Transitions d'animations distinctes

Contrairement à l'animation de propriétés distinctes avec des clés-images, vous devez utiliser le mode de comportement de transition allow-discrete pour effectuer une transition de propriétés distinctes.

Propriété transition-behavior

Le mode allow-discrete permet les transitions discrètes. Il s'agit d'une valeur de la propriété transition-behavior. transition-behavior accepte deux valeurs: normal et allow-discrete.

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

Remarque : Si vous utilisez le raccourci de transition, veillez à utiliser transition-behavior après le raccourci afin qu'il s'applique en raison de sa spécificité.

Remarque : Cette démonstration de transition utilise une technique différente de la première animation, mais est visuellement similaire.

Le raccourci transition définit également cette valeur. Vous pouvez donc omettre la propriété et utiliser le mot clé allow-discrete à la fin du raccourci transition pour chaque transition.

.card {
  transition: opacity 0.5s, display 0.5s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

Si vous animez plusieurs propriétés distinctes, vous devez inclure allow-discrete après chaque propriété que vous souhaitez animer. Exemple :

.card {
  transition: opacity 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

Remarque:Conseil: vous pouvez toujours activer les animations discrètes avec * {transition-behavior: allow-discrete}, mais assurez-vous qu'elles se trouvent à la fin de votre CSS pour éviter tout conflit de spécificité avec le raccourci transition.

Règle @starting-style pour les animations d'entrée

Jusqu'à présent, cet article a traité des animations de sortie. Pour créer des animations d'entrée, vous devez utiliser la règle @starting-style.

Utilisez @starting-style pour appliquer un style que le navigateur peut rechercher avant que l'élément ne s'ouvre sur la page. Il s'agit de l'état "avant ouverture" (à partir duquel vous animez l'élément).

/*  0. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

Important : Les règles dans @starting-style sont appliquées en cascade comme toutes les autres règles de style groupées, sans introduction d'un nouvel ordre dans la cascade. Cela signifie que les déclarations et les règles dans @starting-style ne l'emportent pas nécessairement sur celles situées en dehors. Pour vous assurer que les styles de démarrage ne sont pas écrasés, placez la règle @starting-style après les déclarations de styles autres que de démarrage.

Vous disposez maintenant d'un état d'entrée et de sortie pour ces éléments de la liste de tâches à effectuer :

Animer des éléments vers et depuis la couche supérieure

Pour animer des éléments vers et depuis la couche supérieure, spécifiez @starting-style à l'état "ouvert" afin d'indiquer au navigateur d'où s'effectue l'animation. Pour une boîte de dialogue, l'état ouvert est défini avec l'attribut [open]. Pour un popover, utilisez la pseudo-classe :popover-open.

Voici un exemple simple de boîte de dialogue :

/*   0. IS-OPEN STATE   */
dialog[open] {
  translate: 0 0;
}

/*   1. BEFORE-OPEN STATE   */
@starting-style {
  dialog[open] {
    translate: 0 100vh;
  }
}

/*   2. EXIT STATE   */
dialog {
  transition: translate 0.7s ease-out, overlay 0.7s ease-out allow-discrete, display 0.7s ease-out allow-discrete;
  translate: 0 100vh;
}

Dans l'exemple suivant, les effets d'entrée et de sortie sont différents. Commencez l'animation en haut de la fenêtre d'affichage, puis terminez-la en bas de la fenêtre d'affichage. Il est également écrit avec du CSS imbriqué pour une encapsulation visuelle plus efficace.

Lorsque vous animez un popover, utilisez la classe pseudo :popover-open au lieu de l'attribut open utilisé précédemment.

.settings-popover {
  &:popover-open {
    /*  0. IS-OPEN STATE  */
    /*  state when popover is open, BOTH:
        what we're transitioning *in* to 
        and transitioning *out* from */
    transform: translateY(0);
    opacity: 1;

    /*  1. BEFORE-OPEN STATE  */
    /*  Initial state for what we're animating *in* from, 
        in this case: goes from lower (y + 20px) to center  */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }
  }
  
  /*  2. EXIT STATE  */
  /*  Initial state for what we're animating *out* to , 
      in this case: goes from center to (y - 50px) higher */
  transform: translateY(-50px);
  opacity: 0;
  
  /*  Enumerate transitioning properties, 
      including display and allow-discrete mode */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

.

overlay établissement

Enfin, pour effectuer un fondu d'une popover ou d'une dialog à partir de la couche supérieure, ajoutez la propriété overlay à votre liste de transitions. popover et dialog échappent les extraits ancêtres et les transformations, et placent également le contenu dans la couche supérieure. Si vous ne définissez pas de transition overlay, votre élément sera immédiatement à nouveau rogné, transformé et masqué, et vous ne verrez pas la transition.

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

Incluez plutôt overlay dans la transition ou l'animation pour animer overlay avec le reste des éléments et assurez-vous qu'il reste dans la couche supérieure lors de l'animation. Le rendu sera beaucoup plus fluide.

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

De plus, lorsque plusieurs éléments sont ouverts dans la couche supérieure, la superposition vous aide à contrôler la transition fluide entre la couche supérieure et les autres couches. Vous pouvez voir la différence dans cet exemple simple. Si vous n'appliquez pas overlay au deuxième popover lors de la transition, il quittera d'abord la couche supérieure, en s'arrêtant derrière l'autre popover, avant de commencer la transition. Ce n'est pas un effet très fluide.

Remarque sur les transitions de vue

Si vous apportez des modifications au DOM, par exemple en ajoutant et en supprimant des éléments, les transitions de vue constituent une autre excellente solution pour des animations fluides. Voici deux des exemples ci-dessus créés à l'aide de transitions de vue.

Dans cette première démonstration, au lieu de configurer @starting-style et d'autres transformations CSS, les transitions de vue géreront la transition. La transition d'affichage est configurée comme suit:

Tout d'abord, dans CSS, attribuez à chaque fiche une view-transition-name individuelle.

.card-1 {
  view-transition-name: card-1;
}

.card-2 {
  view-transition-name: card-2;
}

/* etc. */

Ensuite, en JavaScript, encapsulez la mutation DOM (dans ce cas, la suppression de la fiche) dans une transition de vue.

deleteBtn.addEventListener('click', () => {
  // Check for browser support
  if (document.startViewTransition) {
    document.startViewTransition(() => {
      // DOM mutation
      card.remove();
    });
  } 
  // Alternative if no browser support
  else {
    card.remove();
  }
})

Le navigateur peut désormais gérer l'atténuation et la transformation de chaque fiche vers sa nouvelle position.

La démo peut également vous aider à ajouter/supprimer des éléments de liste. Dans ce cas, n'oubliez pas d'ajouter un view-transition-name unique pour chaque fiche créée.

Conclusion

Ces nouvelles fonctionnalités de la plate-forme nous rapprochent de l'animation fluide des entrées et des sorties sur la plate-forme Web. Pour en savoir plus, consultez les liens suivants :

• Présentation de l'API popover
• Spécification css-transitions-2
• Spécification CSS Position 4

Remarque : Cet article a été mis à jour le 13/09/2024 pour utiliser l'ordre correct pour les règles @starting-style imbriquées. À partir de Chrome 130, les règles @starting-style doivent être placées après les déclarations d'état post-entrée (normal).