Comment animer les ombres des boîtes CSS et optimiser les performances

Dans cet article, vous apprendrez à animer les ombres des boîtes CSS sans réduire les performances du navigateur.

En CSS, le box-shadow La propriété est utilisée pour ajouter des ombres aux éléments Web, et ces ombres peuvent être animées. Cependant, les animations d’ombre peuvent affecter les performances du navigateur, provoquant un retard lors du rendu de la page.

Ce guide est destiné aux développeurs frontend ayant une connaissance pratique de l’animation HTML et CSS.

Pourquoi c’est important

Une page Web doit avoir un temps de chargement très court, idéalement moins de cinq secondes. La recherche indique le chargement rapide des pages donne un énorme coup de pouce aux taux de conversion. De plus amples recherches indique que 70 % des utilisateurs déclarent que la vitesse d’un site Web a un impact sur leur volonté d’acheter dans une boutique en ligne. Fondamentalement, les sites rapides sont synonymes d’utilisateurs satisfaits.

Avant d’aller plus loin, voici une démonstration de la façon dont box-shadow les animations peuvent fonctionner sur une page Web. Vous pouvez faire défiler et interagir avec les éléments Web.

Voir le stylo
Éléments Web avec animation d’ombre par SitePoint (@SitePoint)
sur CodePen.

Trois principaux événements d’animation d’ombre de boîte CSS

En raison de ce qui se passe dans les coulisses, l’animation CSS box-shadow peut être gourmande en ressources. Il existe trois processus principaux, ou événements, qui sont déclenchés lors de l’animation de l’ombre de la boîte (ou de toute forme d’animation, d’ailleurs). Ces événements sont la peinture, la mise en page et la composition.

• Peinture. En peinture, le navigateur remplit les pixels avec de la couleur, et box-shadow est l’une des propriétés CSS qui déclenche cet événement. Fondamentalement, cela crée une nouvelle ombre à chaque image de l’animation. Selon MozillaCommentl’animation CSS idéale doit s’exécuter à 60 ips.

• Disposition. Certaines animations modifient la structure d’une page, ce qui peut entraîner de nombreux recalculs de style. Un bon exemple serait une barre latérale repoussant d’autres éléments lors de l’expansion. Les propriétés CSS qui en sont la cause incluent padding, margin, border.

  En termes simples, si la propriété animée affecte d’autres éléments, elle modifiera la mise en page de la page, provoquant des recalculs, ce qui utilise beaucoup de ressources système.

• Composition. En compositing, seules des parties de la page changent. propriétés CSS comme opacity et transform n’affectent que l’élément auquel ils s’appliquent. Cela se traduira par moins de recalculs de style et des animations plus fluides. Le compositing est le processus le moins exigeant des trois.

Avec l’outil d’inspection de votre navigateur, vous pouvez observer ce processus en temps réel. Tout d’abord, ouvrez l’outil d’inspection (Chrome est illustré ci-dessous) et cliquez sur les trois points dans le coin supérieur droit de l’onglet. Vérifier Plus d’outils et sélectionnez Le rendu.

Pour cet exemple, Solin de peinture est sélectionné. Chaque fois qu’il y a un événement de peinture, l’écran clignote en vert :

• La barre de navigation :
  
• Les cartes texte :
  
• Les liens de navigation :
  

Vous constaterez que chaque élément avec une ombre clignote en vert lorsque vous le survolez ou lorsque vous actualisez la page. Vous pouvez également faire la même expérience avec la mise en page : décochez simplement Solin de peinture et sélectionnez Régions de décalage de mise en page.

Veuillez noter que le clignotement de la peinture peut ne pas fonctionner dans les démos CodePen, vous voudrez donc essayer cela avec un aperçu en direct à partir d’un éditeur de texte. La vidéo ci-dessous montre ce que vous devriez voir.

L’objectif est de minimiser les modifications de peinture et de mise en page, car elles utilisent davantage de ressources système.

Vérification des performances

En tant que développeur, vous n’aurez peut-être aucun problème à exécuter des animations d’ombre car vous disposez d’un ordinateur rapide. Mais vous devez tenir compte des utilisateurs avec des PC plus lents et des connexions Internet peu fiables. Ce n’est pas parce qu’il est beau sur votre ordinateur qu’il est le même partout ailleurs.

UN box-shadow a quatre valeurs et une couleur. Ces quatre valeurs sont respectivement la position horizontale (décalage x), la position verticale (décalage y), la propagation et le rayon de flou de l’ombre. Une animation d’ombre typique impliquera un changement dans une ou plusieurs de ces valeurs :

box-shadow: <x-offset> <y-offset> <spread> <blur> <color>;

Créons un simple box-shadow animation, en commençant par du HTML :

<body>
  <div class="box"></div>
</body>

Et voici quelques CSS pour l’ombre initiale et finale :

.box {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
  transition: transform ease 0.5s, box-shadow ease 0.5s;
}
.box:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}

Voici le résultat :

Voir le stylo
Boîte-ombre animée par SitePoint (@SitePoint)
sur CodePen.

Pour l’animation, nous modifions les valeurs du décalage y, du flou et de la propagation. Nous allons également avec une ombre finale plus transparente.

Jetons maintenant un coup d’œil à ce qui se passe dans les coulisses pendant que nous exécutons ceci 0.5s animation. Sur votre navigateur, ouvrez les outils de développement en cliquant avec le bouton droit de la souris et en sélectionnant Inspecter. Une fois les outils ouverts, dirigez-vous vers le Performance languette. Vous pouvez enregistrer l’animation de l’ombre ; quelques secondes suffisent pour voir ce qui se passe.

La capture d’écran ci-dessous montre ce que vous trouverez dans les outils de développement de Chrome.

La période d’animation de l’ombre, survolée de haut en bas, est mise en surbrillance en haut et une ventilation des processus qui se déroulent est affichée en bas. La ventilation montre que le script prend 7 ms, le rendu prend 55 ms et la peinture dure 30 ms.

Maintenant, ces chiffres semblent corrects, mais que se passe-t-il lorsque le processeur est quatre fois plus lent ? Vous pouvez limiter la vitesse de votre processeur à partir de l’onglet Performances.

L’image suivante montre ce qui se passe lorsque vous exécutez la même animation avec un processeur plus lent.

Dans ce nouveau processus, le chargement prend 6ms. Le script prend jusqu’à 52 ms, le rendu a plus que doublé pour atteindre 117 ms et la peinture est maintenant de 72 ms.

Vous pouvez également limiter la vitesse du réseau et rendre le processeur encore plus lent. Les animations d’ombre utilisent beaucoup de ressources système, et nous chercherons à alléger une partie de la charge.

Il est important de noter que le transform La propriété joue un rôle dans les performances du CPU. Plus à ce sujet plus tard.

Comment maintenir des performances optimales

Si vous devez animer des ombres sur une page Web, cela vaut la peine de les rendre plus performantes. Dans cette section, vous apprendrez différentes manières d’ajuster les animations d’ombres afin de réduire les performances.

Nous couvrirons les éléments suivants :

1. animation de l’opacité
2. avoir plusieurs box-shadow couches
3. animer un pseudo élément
4. en utilisant le transform propriété

Animation de l’opacité

Lors de l’utilisation rgba couleurs, le canal alpha contrôle l’opacité. Changer uniquement le canal alpha lors de l’animation des ombres ne sera pas aussi difficile pour le processeur que de changer les valeurs de décalage et de propagation de l’ombre.

.box {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
  transition: box-shadow ease 0.5s;
}
.box:hover {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
}
.box-2 {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
  transition: box-shadow ease 0.5s;
}
.box-2:hover {
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.25);
}

Dans la première animation, seule l’opacité de l’ombre change, tandis que dans la seconde, le décalage y change de 10px à 20pxet la propagation change de 20px à 40px.

Et voici comment ils fonctionnent, à un ralentissement de 6x (pour que vous puissiez voir clairement les graphiques de performances), en commençant par l’animation où seule l’opacité change :

Il faut environ deux secondes pour survoler et quitter la boîte. Comparez maintenant cela à la deuxième animation d’ombre.

Encore une fois, deux secondes de marche et d’arrêt, et il y a une augmentation notable du temps pour tous les événements. La peinture était de 96 ms auparavant, et elle a maintenant doublé à 187 ms. Le rendu, qui fait partie de la composition, est également passé de 97 ms à 178 ms.

Ainsi, changer uniquement l’opacité de l’ombre produit une animation plus performante.

Voici une démo en direct de ces deux animations.

Voir le stylo
Opacité animée vs décalages animés par SitePoint (@SitePoint)
sur CodePen.

Ombres superposées

Si vous observez les ombres autour d’une table ou si vous soulevez un objet au-dessus d’elle, vous remarquerez que sa zone d’ombre la plus sombre est la plus proche de l’objet et qu’elle devient de plus en plus claire à mesure qu’elle s’étend vers l’extérieur.

Reproduire cet effet n’est pas facile avec un seul box-shadow. Les ombres superposées sont bien meilleures. Ils produisent également des animations plus performantes, même avec la couche d’ombre ajoutée.

Comparons les performances d’un seul box-shadow et une ombre multicouche :

.box {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
  transition: box-shadow ease 0.5s;
}
.box:hover {
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.25);
}

Cette animation a 148 ms de rendu et 133 ms de peinture.

Passons maintenant à une animation d’ombre avec deux box-shadow couches:

.box-2 {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25),
              0px 10px 20px 0px rgba(0, 0, 0, 0.5);
  transition: box-shadow ease 0.5s;
}
.box-2:hover {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25),
              0px 20px 40px 0px rgba(0,0,0,0.15);
}

La différence est claire. Non seulement les ombres superposées produisent des effets d’ombre plus beaux, mais elles fonctionnent étonnamment mieux lorsqu’elles sont animées. Le rendu a été réduit de 148 ms à 74 ms, et la peinture est également passée de 133 ms à 74 ms.

Voici une démo en direct des deux comparés.

Voir le stylo
Animation d’ombre simple ou d’ombre en couches par SitePoint (@SitePoint)
sur CodePen.

Essayons maintenant quelque chose de différent, en ajoutant la deuxième ombre pendant l’animation :

.box-2 {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
  transition: box-shadow ease 0.5s;
}
.box-2:hover {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25),
              0px 20px 40px 0px rgba(0,0,0,0.15);
}

L’ajout d’un deuxième calque d’ombre pendant l’animation n’est pas aussi performant que d’avoir deux calques dès le début, mais il a toujours 100 ms de peinture contre 133 ms avec le seul box-shadow animation, ce qui est une amélioration.

En fin de compte, c’est à vous de décider de l’apparence de votre ombre et de la méthode que vous utiliserez pour la créer.

Animer un pseudo élément

Cette fois, nous allons répliquer l’animation des ombres sans changer le box-shadow propriété. D’après les démos précédentes, nous pouvons voir qu’il y a encore beaucoup de repeints en cours pendant l’animation des ombres. Si vous modifiez le box-shadow valeurs, vous ne pouvez pas éviter ce processus.

Vous verrez à la fin de cette section que la peinture sera presque complètement éliminée. Cela impliquera plus de lignes de code, mais nous obtiendrons des animations d’ombres plus performantes.

Ainsi, après le style de base de la boîte, créez un :after pseudo-élément et donnez-lui un box-shadowqui sera l’état final de l’ombre après animation :

.pseudo {
  position: relative;
  transition: box-shadow ease 0.5s, transform ease 0.5s;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5)
}
.pseudo::after{
  content: "";
  position: absolute;
  border-radius: 20px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
  transition: opacity ease 0.5s;
}

Maintenant, tout ce que vous avez à faire est de changer le opacity du pseudo élément sur :hover:

.pseudo:hover{
  transform: translateY(-10px);
}
.pseudo:hover::after{
  opacity: 1;
}

Regardons-le à côté d’une animation d’ombre régulière.

Voir le stylo
Pseudo Ombre par SitePoint (@SitePoint)
sur CodePen.

Il n’y a pas grand-chose à faire visuellement ici. La vraie différence réside dans leurs performances. Les résultats pour le régulier box-shadow animation sont présentés ci-dessous.

Il a 230 ms de temps de rendu et 211 ms pour la peinture. Maintenant l’animation de la pseudo ombre.

Cette fois, nous avons 148 ms de rendu et seulement 51 ms de peinture. Il y a plus de code, mais le résultat en vaut la peine.

En utilisant le transform propriété

Cela s’applique principalement à l’élément principal, la boîte, qui aura l’ombre. En utilisant le transform propriété, au lieu de modifier la disposition des propriétés comme marginréduira le nombre de recalculs de style.

Cette propriété peut être utilisée avec le translate ou scale propriétés pour simuler le soulèvement d’un élément de la page, créant l’illusion de profondeur.

Quelques conseils utiles

Il est déjà établi que toute animation impliquant le box-shadow propriété affectera les performances. Donc, si vous devez avoir une animation d’ombre de boîte CSS, voici quelques conseils utiles à garder à l’esprit.

Tout d’abord, gardez-les au minimum. Ne jetez pas d’ombres sur chaque élément pour le plaisir de le faire. Deuxièmement, animez uniquement les éléments interactifs. Il n’est pas nécessaire d’animer quoi que ce soit qui n’a pas de fonction. Cela réduira la charge de travail du processeur et améliorera considérablement les performances.

Conclusion

Les ombres peuvent améliorer visuellement votre site, mais elles affectent également les performances, en particulier en ce qui concerne l’animation. Dans cet article, nous avons testé différentes méthodes d’animation d’ombres et comparé leurs performances. L’animation des ombres déclenche trois événements – la peinture, les changements de mise en page et la composition – le premier étant le plus exigeant.

La solution idéale serait de ne pas animer du tout les ombres (car elles ont l’air bien comme elles sont !). Si vous voulez vraiment animer le box-shadow propriété, modifier uniquement l’opacité au lieu de modifier les valeurs de décalage réduira la repeinture. Le hic, c’est que vous perdrez cette illusion de profondeur que les ombres sont censées fournir. Une autre approche consiste à animer deux box-shadow couches. Cette solution est visuellement agréable et performante, même avec l’ombre supplémentaire.

La dernière option est d’animer non pas le box-shadow mais un pseudo élément qui fournit une ombre. Cela réduit considérablement la quantité de repeinture et le travail global effectué par le processeur lors de l’exécution de l’animation. Vous écrirez plus de code, mais c’est votre meilleur pari pour assurer de bonnes performances.

Contenu connexe :