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

Raphael - Alsacreations - 07/03

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èreme...
[Courte citation de 8% de l'article original]