L'art des animations d'entrée avec CSS @starting-style

La règle @starting-style est une règle conditionnelle (at-rule) qui permet de définir l'état initial d'un élément avant qu'une transition ou une animation ne commence. Cette fonctionnalité comble un vide important dans le système d'animations CSS, en permettant de définir explicitement les propriétés d'un élément au moment où il apparaît dans le DOM, plutôt que d'utiliser les valeurs par défaut du navigateur.

Syntaxe de base

@starting-style {
  /* Sélecteurs et propriétés qui définissent l'état initial */
  selecteur {
    propriete: valeur;
  }
}

Cette règle s'applique uniquement aux éléments qui :

1. Viennent d'être insérés dans le DOM.
2. Ont des propriétés CSS qui peuvent faire l'objet d'une transition.

Imbrication (nesting)

@starting-style peut être imbriqué directement à l'intérieur d'un bloc de sélecteur, ce qui permet une syntaxe plus concise et mieux organisée :

.element {
  opacity: 1;
  transition: opacity 0.5s ease;

  @starting-style {
    opacity: 0;
  }
}

Cette approche imbriquée est particulièrement utile lorsqu'on travaille avec plusieurs sélecteurs qui partagent des animations similaires, car elle maintient les états initiaux et finaux proches les uns des autres dans le code.

Cas d'utilisation courants

La règle @starting-style répond à un problème de longue date dans le développement web : comment créer des animations d'apparition naturelles sans recourir à des techniques complexes ou à JavaScript ? Voici les principaux scénarios où cette fonctionnalité brille particulièrement :

1. Animations d'entrée fluides

Sans @starting-style, lorsqu'un élément est ajouté au DOM avec une opacité de 1 et une transition, il apparaît instantanément puis reste statique (car il est déjà à son état final). Avec @starting-style, il devient possible de spécifier qu'il doit commencer avec une opacité de 0 et appliquer une transition vers 1.

Ce cas d'utilisation est particulièrement pratique pour les notifications, les toasts, les modales et autres éléments qui doivent apparaître de façon élégante sans perturber l'expérience utilisateur.

2. Animations de positionnements

Particulièrement utile pour les animations impliquant des changements de positionnement, de taille ou de disposition qui nécessitent un point de départ spécifique.

Par exemple, pour les listes d'éléments chargés dynamiquement ou les grilles réorganisées après un filtrage, @starting-style permet de définir précisément la position initiale, créant ainsi un effet de mouvement fluide depuis cet état vers l'état final.

3. Effets d'apparition personnalisés

Permet de créer des effets d'entrée élégants sans avoir recours à JavaScript ou à des astuces CSS complexes.

Cela inclut des animations combinant plusieurs propriétés comme l'opacité, la rotation, le redimensionnement et le déplacement. Ces animations multiaxiales étaient auparavant difficiles à implémenter de manière purement déclarative en CSS, nécessitant souvent des contournements ou des frameworks.

4. Menus et sous-menus

L'animation des menus déroulants ou des sous-menus bénéficie grandement de @starting-style, permettant de définir précisément le point d'origine de l'expansion (depuis le haut, le bas ou le côté) et d'autres propriétés visuelles pour une transition naturelle.

Avantages

La règle @starting-style présente de nombreux bénéfices par rapport aux approches traditionnelles d'animation d'entrée. Ces avantages touchent aussi bien l'expérience de développement que les performances et la maintenance du code :

1. Déclaratif et simple : Définit clairement l'état initial sans JavaScript. Cette approche purement CSS permet d'exprimer l'intention directement dans les feuilles de style sans ajouter de logique supplémentaire côté client. La syntaxe est intuitive et s'intègre parfaitement dans le workflow existant des développeurs front-end.

2. Performance : Optimisé par le navigateur pour de meilleures animations. Étant implémenté nativement par les navigateurs, @starting-style peut bénéficier d'optimisations internes que les solutions JavaScript ne peuvent pas atteindre. Les animations sont plus fluides et consomment moins de ressources, particulièrement important sur les appareils mobiles… Même si, soyons francs, nous allons plutôt éviter les animations sur mobile.

3. Cohérence : Évite les sauts ou comportements inattendus lors de l'apparition d'éléments. Sans cette règle, les éléments peuvent apparaître brusquement avant que les transitions ne commencent, créant une expérience visuelle dégradée. @starting-style garantit que les éléments commencent leur vie dans le DOM avec l'état visuel exact que vous avez défini.

4. Lisibilité du code : Avec la syntaxe imbriquée, les états initiaux et finaux sont déclarés à proximité l'un de l'autre, rendant le code plus compréhensible et plus facile à maintenir.

Inconvénients

Malgré ses nombreux avantages, @starting-style présente certaines limitations qu'il est important de considérer avant de l'intégrer dans vos projets. Ces inconvénients sont principalement liés à sa nouveauté et à sa portée d'application limitée :

1. Support navigateur : Fonctionnalité récente qui n'est pas encore prise en charge par tous les navigateurs. Ce point est crucial pour les applications web devant fonctionner sur un large éventail de navigateurs, y compris des versions plus anciennes. Vous devrez prévoir des solutions de repli pour garantir une expérience acceptable pour tous les utilisateurs. Ce point est détaillé un peu plus loin.

2. Cas d'usage limités : Ne s'applique qu'aux éléments nouvellement insérés dans le DOM. Cette règle n'a aucun effet sur les éléments existants ou lorsque vous modifiez des propriétés sur des éléments déjà présents. Il s'agit vraiment d'une solution spécialisée pour les animations d'entrée, pas pour les animations générales.

3. Débogage : Peut être difficile à déboguer car l'état n'est visible que brièvement pendant l'insertion dans le DOM. Les outils de développement actuels ne sont pas toujours adaptés pour inspecter ces états transitoires, ce qui peut compliquer le processus de mise au point des animations. Ceci dit, rien ne vous empêche d'augmenter artificiellement la durée de l'animation pour la tester.

4. Complexité potentielle : Peut rendre le code CSS moins prévisible si utilisé de manière excessive. Comme avec toute technique d'animation, il est facile d'en faire trop en créant des interfaces trop animées qui peuvent distraire ou fatiguer les utilisateurs. Une utilisation judicieuse reste nécessaire.

Exemples pratiques

Exemple 1 : Fondu à l'apparition

.fade-in {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;

  @starting-style {
    opacity: 0;
  }
}

Exemple 2 : Animation d'entrée avec translation

.slide-in {
  translate: 0;
  transition: translate 0.8s ease-out;

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

Exemple 3 : Animation combinée

.fancy-entrance {
  opacity: 1;
  scale: 1;
  rotate: 0deg;
  transition: 
    opacity 0.5s ease-out, 
    scale 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    rotate 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  @starting-style {
    opacity: 0;
    scale: 0.6;
    rotate: -10deg;
  }
}

Démo interactive

Voici le code HTML et CSS pour une démo simple que vous pouvez tester :

Voir la démo

Compatibilité des navigateurs

La règle @starting-style est encore en développement, même si son support est déjà relativement universel :

Vérifiez toujours la compatibilité actuelle sur Can I Use avant d'utiliser cette fonctionnalité en production. Par exemple, notez que Firefox n'accepte pas cette fonctionnalité lorsqu'appliquée à display: none.

Alternatives pour les navigateurs non supportés

Pour garantir une expérience utilisateur cohérente sur tous les navigateurs, y compris ceux qui ne prennent pas encore en charge @starting-style, plusieurs approches peuvent être envisagées :

1. Utiliser @supports pour la détection de fonctionnalités : Cette règle conditionnelle vous permet de fournir différentes implémentations selon la prise en charge des fonctionnalités par le navigateur :

@supports at-rule(@starting-style) {
  /* Styles si @starting-style est supporté */
}

Seul petit souci : la fonction at-rule() dans @supports est relativement récente et sa compatibilité est beaucoup trop limitée actuellement.

2. Approche progressive : Une méthode fiable consiste simplement à laisser les navigateurs ignorer silencieusement la règle qu'ils ne comprennent pas :

/* Style de base qui fonctionne partout */
.element {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Les navigateurs qui ne comprennent pas `@starting-style` ignoreront cette règle */
.element {
  @starting-style {
    opacity: 0;
  }
}

3. Utiliser des classes JavaScript pour gérer les transitions d'entrée :

const element = document.createElement("div");
element.className = "element element-entering";
container.appendChild(element);

// Retirer la classe après une frame pour déclencher la transition
requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    element.classList.remove("element-entering");
  });
});

4. Frameworks JavaScript et leurs systèmes de transition : Si vous utilisez déjà un framework, tirez parti de ses capacités intégrées d'animation :

• Vue.js et son composant  : Vue propose un système élégant pour gérer les animations d'entrée/sortie.
• React avec des bibliothèques comme react-transition-group ou framer-motion.
• Angular avec son système d'animation.
• Bibliothèques légères comme Alpine.js ou HTMX qui proposent également des solutions pour les animations d'entrée.
• Bibliothèques spécialisées comme GSAP.

Ces solutions de frameworks offrent l'avantage d'une compatibilité étendue et sont souvent accompagnées de fonctionnalités supplémentaires comme la gestion des animations lors de la suppression d'éléments (ce que @starting-style ne gère pas).

La meilleure approche consiste souvent à combiner plusieurs de ces techniques, en commençant par une expérience de base fonctionnelle pour tous les utilisateurs, puis en améliorant progressivement l'interface pour les navigateurs qui prennent en charge les fonctionnalités modernes comme @starting-style.

Conclusion

La règle @starting-style représente une avancée significative pour les animations CSS, en simplifiant grandement la création d'animations d'entrée fluides. Même si son support n'est pas encore universel, elle offre une solution élégante et performante pour les animations d'apparition qui étaient auparavant difficiles à implémenter en CSS pur.

Cette fonctionnalité s'inscrit dans l'évolution continue du CSS vers des capacités d'animation et de mise en page de plus en plus puissantes et déclaratives, réduisant notre dépendance à JavaScript pour des effets visuels sophistiqués.

Retrouvez l'intégralité de ce tutoriel en ligne sur Alsacreations.com