Maîtriser CSS @starting-style : Définir les états initiaux d'animation

Dans le monde dynamique du développement web, les animations jouent un rôle crucial pour améliorer l'expérience utilisateur, fournir un retour visuel et guider l'interaction. Bien que les animations et transitions CSS aient considérablement évolué, le contrôle précis de l'état initial d'une animation, surtout lorsqu'elle est déclenchée par une interaction de l'utilisateur ou un changement d'état, a souvent présenté des défis subtils. C'est là qu'intervient la règle-at @starting-style, une fonctionnalité CSS puissante conçue pour résoudre ce problème avec élégance.

Comprendre le défi : La première image de l'animation

Traditionnellement, lorsqu'une animation ou une transition est appliquée à un élément, son état initial est déterminé par les styles calculés actuels de l'élément *au moment où l'animation/transition commence*. Cela peut entraîner des sauts visuels inattendus ou des incohérences, en particulier dans des scénarios comme :

• Navigation entre les pages : Lorsqu'un composant apparaît avec une animation sur une nouvelle page, ses styles initiaux peuvent être différents de ce qui est prévu s'ils ne sont pas gérés avec soin.
• Déclenchement d'animations au survol ou au focus : L'élément peut avoir des styles qui clignotent ou changent brièvement avant que l'animation ne prenne le relais en douceur.
• Animations appliquées via JavaScript : Si JavaScript ajoute dynamiquement une classe qui déclenche une animation, l'état de l'élément juste avant l'ajout de la classe influence le début de l'animation.
• Animations impliquant display: none ou visibility: hidden : Les éléments qui ne sont pas affichés initialement ne peuvent pas participer aux animations tant qu'ils ne sont pas rendus visibles, ce qui entraîne une apparition brusque plutôt qu'une entrée en douceur.

Prenons un exemple simple : vous voulez qu'un élément apparaisse en fondu et s'agrandisse. Si l'élément a initialement opacity: 0 et transform: scale(0.5), et qu'une animation CSS est ensuite appliquée pour cibler opacity: 1 et transform: scale(1), l'animation démarre à partir de son état actuel (invisible et réduit). Cela fonctionne comme prévu. Cependant, que se passe-t-il si l'élément a initialement opacity: 1 et transform: scale(1), et qu'une animation est appliquée qui devrait commencer à partir de opacity: 0 et scale(0.5) ? Sans @starting-style, l'animation commencerait à partir de l'opacity: 1 et du scale(1) existants de l'élément, sautant ainsi le point de départ prévu.

Présentation de @starting-style : La solution

La règle-at @starting-style offre un moyen déclaratif de définir les valeurs initiales pour les animations et transitions CSS qui sont appliquées à un élément lorsqu'il est introduit pour la première fois dans le document, ou lorsqu'il entre dans un nouvel état. Elle vous permet de spécifier un ensemble de styles avec lesquels l'animation commencera, indépendamment des styles par défaut de l'élément au moment de sa création ou au début d'une transition.

Elle est particulièrement puissante lorsqu'elle est utilisée en conjonction avec :

• Animations @keyframes : Définir l'état initial pour les animations qui pourraient ne pas commencer à 0% (ou from).
• Transitions CSS : Assurer une transition fluide d'un état non transitionné au début de la transition.

Comment @starting-style fonctionne avec @keyframes

Lorsque vous utilisez @starting-style avec une animation @keyframes, vous pouvez spécifier des styles qui doivent être appliqués *avant* que la première image clé de l'animation (généralement l'image clé 0% ou from) ne prenne effet. C'est particulièrement utile pour les animations qui doivent commencer à partir d'un état 'invisible' ou 'réduit' alors que l'élément pourrait autrement être affiché avec des styles visibles par défaut.

La syntaxe est simple :

            
@keyframes fadeAndScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

.my-element {
  /* Other styles */
  animation: fadeAndScale 1s ease-out forwards;
}

@starting-style {
  opacity: 0;
  transform: scale(0.5);
}

            

              
                Copy
              
            
          

Dans cet exemple, l'élément .my-element est destiné à disparaître en fondu et à rétrécir. S'il était initialement affiché avec opacity: 1 et transform: scale(1), l'animation commençant à from { opacity: 1; transform: scale(1); } semblerait instantanée car il est déjà dans l'état 'from'. Cependant, en utilisant @starting-style, nous indiquons explicitement au navigateur :

• Lorsque cette animation commence, l'élément doit être préparé visuellement avec opacity: 0.
• Et sa transformation doit être scale(0.5).

Cela garantit que même si l'état naturel de l'élément est différent, l'animation commence correctement sa séquence à partir des valeurs de départ spécifiées. Le navigateur applique effectivement ces valeurs @starting-style, puis démarre l'image clé from à partir de ces valeurs, et continue jusqu'à l'image clé to. Si l'animation est définie sur forwards, l'état final de l'image clé to est maintenu après la fin de l'animation.

Comment @starting-style fonctionne avec les transitions

Lorsqu'une transition CSS est appliquée à un élément, elle interpole en douceur entre les styles de l'élément *avant* que la transition ne se produise et ses styles *après* que la transition se soit produite. Le défi se pose lorsque l'état qui déclenche la transition est ajouté dynamiquement, ou lorsque vous souhaitez qu'une transition commence à partir d'un point spécifique qui n'est pas l'état rendu par défaut de l'élément.

Prenons l'exemple d'un bouton qui s'agrandit au survol. Par défaut, la transition se déplacerait en douceur de l'état non survolé du bouton à son état survolé.

            
.my-button {
  transition: transform 0.3s ease;
}

.my-button:hover {
  transform: scale(1.1);
}

            

              
                Copy
              
            
          

Cela fonctionne parfaitement. La transition part du transform: scale(1) par défaut du bouton vers transform: scale(1.1).

Maintenant, imaginez que vous vouliez que le bouton apparaisse avec un effet d'agrandissement, puis, au survol, s'agrandisse *encore plus*. Si le bouton apparaît initialement à sa taille normale, la transition de survol est simple. Mais que se passe-t-il si le bouton apparaît en utilisant une animation de fondu et d'agrandissement, et que vous voulez que l'effet de survol soit également un agrandissement progressif à partir de son état *actuel*, et non de son état d'origine ?

C'est là que @starting-style devient inestimable. Il vous permet de définir l'état initial d'une transition lorsque cette transition est appliquée à un élément qui est rendu pour la première fois (par exemple, lorsqu'un composant entre dans le DOM via JavaScript ou lors du chargement d'une page).

Disons que vous avez un élément qui doit apparaître en fondu et en s'agrandissant, puis s'agrandir davantage au survol. Vous pouvez utiliser une animation pour l'entrée, puis une transition pour l'effet de survol :

            
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animated-card {
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInScale 0.5s ease-out forwards;
  transition: transform 0.3s ease;
}

.animated-card:hover {
  transform: scale(1.1);
}

/* Define the starting style for the initial entry animation */
@starting-style {
  opacity: 0;
  transform: scale(0.8);
}

            

              
                Copy
              
            
          

Dans ce scénario, la règle @starting-style garantit que l'élément commence son rendu avec opacity: 0 et transform: scale(0.8), correspondant à l'image clé from de l'animation fadeInScale. Une fois l'animation terminée et que l'élément s'est stabilisé à opacity: 1 et transform: scale(1), la transition pour l'effet de survol interpole alors en douceur de cet état à transform: scale(1.1). Ici, @starting-style influence spécifiquement l'application initiale de l'animation, s'assurant qu'elle démarre du point visuel souhaité.

Il est crucial de noter que @starting-style s'applique aux transitions qui sont appliquées aux éléments nouvellement insérés dans le document. Si un élément existe déjà et que ses styles changent pour inclure une propriété de transition, @starting-style n'influence pas directement le début de cette transition spécifique, à moins que l'élément ne soit également en train d'être rendu pour la première fois.

Support des navigateurs et mise en œuvre

La règle-at @starting-style est un ajout relativement nouveau aux spécifications CSS. Au moment de son adoption généralisée :

• Chrome et Edge ont un excellent support.
• Firefox a un bon support.
• Safari offre également un bon support.

Il est toujours conseillé de vérifier Can I Use pour les informations de compatibilité des navigateurs les plus à jour. Pour les navigateurs qui ne prennent pas en charge @starting-style, l'animation ou la transition se rabattra simplement sur les styles calculés existants de l'élément au moment de l'invocation, ce qui pourrait entraîner le comportement moins qu'idéal décrit précédemment.

Bonnes pratiques et utilisation avancée

1. La cohérence est la clé

Utilisez @starting-style pour vous assurer que les animations et les transitions commencent de manière cohérente, quelle que soit la manière dont l'élément est introduit dans le DOM ou quels que soient ses styles calculés initiaux. Cela favorise une expérience utilisateur plus prévisible et soignée.

2. Désencombrez vos keyframes

Au lieu d'ajouter l'état initial (par exemple, opacity: 0) à l'image clé from de chaque animation qui en a besoin, vous pouvez le définir une seule fois dans @starting-style. Cela rend vos règles @keyframes plus propres et plus centrées sur la progression principale de l'animation.

3. Gérer les changements d'état complexes

Pour les composants qui subissent plusieurs changements d'état ou animations, @starting-style peut aider à gérer l'apparence initiale des éléments lorsqu'ils sont ajoutés ou mis à jour. Par exemple, dans une application monopage (SPA) où les composants sont fréquemment montés et démontés, définir le style de départ d'une animation d'entrée avec @starting-style garantit une apparence fluide.

4. Considérations sur les performances

Bien que @starting-style n'ait pas d'impact inhérent sur les performances, les animations et les transitions qu'il contrôle en ont un. Efforcez-vous toujours d'animer des propriétés que le navigateur peut gérer efficacement, telles que transform et opacity. Évitez d'animer des propriétés comme width, height ou margin si possible, car elles peuvent déclencher des recalculs de mise en page coûteux.

5. Solutions de repli pour les anciens navigateurs

Pour garantir une expérience raisonnable aux utilisateurs sur les navigateurs qui ne prennent pas en charge @starting-style, vous pouvez fournir des styles de repli. Il s'agit des styles initiaux naturels de l'élément à partir desquels l'animation commencerait autrement. Dans de nombreux cas, le comportement par défaut sans @starting-style peut être acceptable si l'animation est simple.

Pour des scénarios plus complexes, vous pourriez avoir besoin de JavaScript pour détecter le support du navigateur ou appliquer des styles initiaux spécifiques. Cependant, l'objectif de @starting-style est de réduire le besoin de telles interventions JavaScript.

6. Portée mondiale et localisation

Lors du développement pour un public mondial, les animations doivent être inclusives et ne pas reposer sur des repères visuels spécifiques à un pays. La règle-at @starting-style est une fonctionnalité technique CSS qui fonctionne indépendamment du contexte culturel. Sa valeur réside dans le fait de fournir une base technique cohérente pour les animations qui peuvent ensuite être stylées et appliquées de manière culturellement sensible. Assurer des animations fluides sur différents appareils et conditions de réseau est un objectif universel pour les développeurs web, et @starting-style contribue à atteindre cette cohérence.

Scénario d'exemple : Animation d'une carte de portfolio

Illustrons cela avec un modèle de conception web courant : une grille de portfolio où chaque carte apparaît en animation avec un léger délai et un effet de mise à l'échelle.

Objectif : Chaque carte doit apparaître en fondu et s'agrandir de 0.9 à 1, et un léger délai doit être appliqué à chaque carte à mesure qu'elles apparaissent dans la grille.

HTML :

            
<div class="portfolio-grid">
  <div class="portfolio-item">Card 1</div>
  <div class="portfolio-item">Card 2</div>
  <div class="portfolio-item">Card 3</div>
  <div class="portfolio-item">Card 4</div>
</div>

            

              
                Copy
              
            
          

CSS :

            
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.portfolio-item {
  background-color: #f0f0f0;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2em;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  /* Default initial state */
  opacity: 0;
  transform: scale(0.9);

  /* Animation properties */
  animation: fadeInUpScale 0.6s ease-out forwards;
}

/* @keyframes for the animation */
@keyframes fadeInUpScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* @starting-style to define the initial state for the animation */
@starting-style {
  opacity: 0;
  transform: scale(0.9);
}

/* Applying delays to each item using :nth-child */
.portfolio-item:nth-child(1) {
  animation-delay: 0.1s;
}
.portfolio-item:nth-child(2) {
  animation-delay: 0.2s;
}
.portfolio-item:nth-child(3) {
  animation-delay: 0.3s;
}
.portfolio-item:nth-child(4) {
  animation-delay: 0.4s;
}

/* Adjusting keyframes to show the effect */
@keyframes fadeInUpScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

            

              
                Copy
              
            
          

Explication :

1. Les éléments .portfolio-item sont initialement définis sur opacity: 0 et transform: scale(0.9). C'est leur état avant que l'animation ne soit appliquée.
2. La règle @keyframes fadeInUpScale définit l'animation de 0% (qui est effectivement l'état de départ pour la progression de l'animation) à 100%.
3. La règle @starting-style déclare explicitement que lorsque l'animation fadeInUpScale est appliquée, elle doit commencer avec opacity: 0 et transform: scale(0.9). Cela garantit que même si les styles par défaut changeaient d'une manière ou d'une autre, l'animation commencerait toujours à partir de ce point défini.
4. La propriété animation-delay est appliquée à chaque enfant en utilisant les sélecteurs :nth-child pour décaler l'apparition des cartes, créant ainsi une séquence plus attrayante visuellement.
5. Le mot-clé forwards garantit que l'élément conserve les styles de la dernière image clé une fois l'animation terminée.

Sans @starting-style, si le navigateur n'interprétait pas correctement les styles calculés initiaux de .portfolio-item comme point de départ de l'animation, celle-ci pourrait commencer à partir d'un état différent et non intentionnel. @starting-style garantit que l'animation commence correctement sa séquence à partir des valeurs prévues.

Conclusion

La règle-at @starting-style est une avancée significative dans les animations et transitions CSS. Elle permet aux développeurs d'obtenir un contrôle plus précis sur les états initiaux des éléments animés, ce qui conduit à des interfaces utilisateur plus fluides, plus prévisibles et d'un professionnalisme impeccable. En comprenant et en mettant en œuvre @starting-style, vous pouvez faire passer vos animations web de bonnes à exceptionnelles, garantissant une expérience cohérente et engageante pour votre public mondial sur un large éventail d'appareils et de navigateurs. Adoptez cet outil puissant pour créer des expériences web superbement animées qui captivent véritablement les utilisateurs.