Comment animer les ombres de la boîte CSS et optimiser les performances

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

Dans CSS, la propriété Box-Shadow 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 de la rendu de la page.

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

Les plats clés

• Animation des ombres de la boîte CSS peut avoir un impact sur les performances du navigateur, ce qui entraîne potentiellement à la traîne pendant le rendu de la page. Par conséquent, il est crucial d'optimiser ces animations pour maintenir un temps de chargement rapide, ce qui est un facteur clé de la satisfaction des utilisateurs et des taux de conversion.
• Les animations CSS Box-Shadow déclenchent trois processus principaux: peinture, mise en page et composition. La peinture, qui implique le navigateur remplissant des pixels de couleur, est la plus forte en fortes ressources. Les changements de disposition, qui impliquent la recalculation de la structure de la page, consomment également des ressources importantes. La composition, qui n'affecte que des parties de la page, est le processus le moins exigeant.
• Pour optimiser les performances, les développeurs peuvent adopter plusieurs techniques. Ceux-ci incluent l'animation uniquement de l'opacité des ombres plutôt que de modifier leurs valeurs de décalage, ce qui réduit le besoin de repeindre; en utilisant plusieurs calques de shadow de boîte, qui fonctionnent étonnamment mieux lorsqu'ils sont animés; et animer un pseudo élément qui fournit une ombre, ce qui réduit considérablement la quantité de repensage et la charge de travail globale du processeur.
• Il est important de garder les animations d'ombre minimales et d'animer uniquement les éléments interactifs pour réduire la charge de travail du CPU. Si des animations fantômes sont nécessaires, les développeurs doivent peser le compromis entre l'attrait visuel de la profondeur et les avantages de la performance de la modification uniquement de l'opacité. Ils devraient également considérer le code supplémentaire requis pour animer un pseudo élément qui fournit une ombre.

pourquoi cela compte

Une page Web doit avoir un temps de chargement très court, idéalement en moins de cinq secondes. La recherche indique que le chargement de pages rapides donne un énorme coup de pouce aux taux de conversion. Des recherches supplémentaires indiquent que 70% des utilisateurs disent que la vitesse d'un site Web a un impact sur leur volonté d'acheter dans une boutique en ligne. Fondamentalement, les sites rapides égalent les utilisateurs heureux.

Avant d'aller plus loin, voici une démo de la façon dont les animations de box-shadow 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 événements d'animation d'ombre de la boîte CSS principale

En raison de ce qui se passe dans les coulisses, l'animation CSS Box-Shadow peut être lourde des ressources. Il existe trois processus, ou événements principaux, qui sont déclenchés pendant l'animation de l'ombre de la boîte (ou 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 de couleur, et Box-Shadow est l'une des propriétés CSS qui déclenche cet événement. Fondamentalement, il crée une nouvelle ombre à chaque cadre de l'animation. Selon Mozilla, l'animation CSS idéale devrait fonctionner à 60 images par seconde

• Disposition. Certaines animations modifient la structure d'une page, ce qui peut conduire à de nombreuses récalculs de style. Un bon exemple serait une barre latérale poussant d'autres éléments à l'écart lors de l'expansion. Les propriétés CSS qui provoquent celle-ci incluent le rembourrage, la marge, la bordure.

  En termes simples, si la propriété animée affecte d'autres éléments, il modifiera la disposition de la page, provoquant des récalculs - qui utilise beaucoup de ressources système.

• Compositing. En compositing, seules les parties de la page changent. Les propriétés CSS comme l'opacité et la transformation affectent uniquement l'élément à laquelle ils sont appliqués. Cela signifiera moins de récalculs de style et d'animations plus lisses. Le compositing est le processus le moins tasant des trois.

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

Pour cet exemple, le clignotement de la peinture est sélectionné. Chaque fois qu'il y a un événement de peinture, l'écran clignote le vert:

• la barre navale:
  
• Les cartes de texte:
  
• les liens NAV:
  

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

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

L'objectif est de minimiser les changements de peinture et de mise en page, car ils utilisent plus de ressources système.

Vérification des performances

En tant que développeur, vous n'avez peut-être aucun problème à exécuter des animations Shadow car vous avez un ordinateur rapide. Mais vous devez considérer les utilisateurs avec des PC plus lents et des connexions Internet peu fiables. Ce n'est pas parce que ça a l'air bien sur votre ordinateur que c'est la même part partout.

Un box-shadow a quatre valeurs et une couleur. Ces quatre valeurs sont la position horizontale de l'ombre (X-Offset), la position verticale (Offset Y), la propagation et le rayon de floues respectivement. Une animation d'ombre typique impliquera un changement dans une ou plusieurs de ces valeurs:

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

Créons une simple animation de box-shadow, en commençant par un html:

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

Et voici quelques CSS pour l'ombre initiale et la dernière ombre:

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

Voici le résultat:

Voir le stylo
Box-shadow animé par SitePoint (@SitePoint)
sur codepen.

Pour l'animation, nous modifions les valeurs du Y-Offset, Blur et Spread. Nous allons également avec une ombre finale plus transparente.

Maintenant, jetons un coup d'œil à ce qui se passe dans les coulisses alors que nous exécutons cette animation 0.5S. Sur votre navigateur, ouvrez les outils du développeur en cliquant avec le bouton droit et en sélectionnant Inspecter. Une fois les outils ouverts, rendez-vous vers l'onglet Performance. Vous pouvez enregistrer l'animation Shadow; Quelques secondes suffisent à voir ce qui se passe.

La capture d'écran ci-dessous montre ce que vous trouverez dans les Devtools de Chrome.

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

Maintenant, ces chiffres semblent corrects, mais que se passe-t-il lorsque le CPU est quatre fois plus lent? Vous pouvez étrangler votre vitesse de CPU à partir de l'onglet Performance.

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 6 ms. Le script est jusqu'à 52 ms, le rendu a plus que doublé à 117 ms, et la peinture est maintenant de 72 ms.

Vous pouvez également faire progresser la vitesse du réseau et rendre le CPU encore plus lent. Les animations Shadow utilisent beaucoup de ressources système, et nous chercherons à enlever une partie de la charge.

Il est important de noter que la propriété Transform joue un rôle dans la façon dont le CPU fonctionne. 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 performants. Dans cette section, vous apprendrez diverses façons dont les animations Shadow peuvent être modifiées afin que le coup de performance soit réduit.

Nous couvrirons ce qui suit:

1. Animer l'opacité
2. Avoir plusieurs calques de shadow en boîte
3. Animer un pseudo élément
4. en utilisant la propriété Transform

Animer l'opacité

Lors de l'utilisation des couleurs RGBA, le canal alpha contrôle l'opacité. Changer uniquement le canal alpha lorsque l'animation des ombres ne sera pas aussi difficile sur le CPU que de modifier les valeurs du décalage et de diffusion de l'ombre.

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

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

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

Il faut environ deux secondes pour planer sur et hors de la boîte. Comparez maintenant cela à la deuxième animation d'ombre.

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

Donc, 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 en couches

Si vous observez les ombres autour d'une table ou soulevez un objet au-dessus, vous remarquerez que sa région de l'ombre la plus sombre est la plus proche de l'objet, et elle devient de plus en plus légère car elle se propage vers l'extérieur.

reproduire cet effet n'est pas facile avec une boîte de boîte. Les ombres en couches sont beaucoup mieux. Ils produisent également des animations plus performantes, même avec la couche d'ombre supplémentaire.

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

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

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

Maintenant, ayons une animation d'ombre avec deux calques de shadow:

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

La différence est claire. Non seulement les ombres en couches produisent des effets d'ombre plus beaux, mais ils fonctionnent étonnamment mieux lorsqu'ils sont animés. Le rendu a été réduit de 148 ms à 74 ms, et la peinture est également en baisse de 133 ms à 74 ms.

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

Voir le stylo
Animation de l'ombre en couches unique VS par SitePoint (@SitePoint)
sur codepen.

Maintenant, essayons quelque chose de différent, ajoutant la deuxième ombre pendant l'animation:

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

Ajouter une deuxième couche d'ombre pendant l'animation n'est pas aussi interprète que d'avoir deux couches dès le début, mais elle a toujours 100 ms de peinture par rapport à 133 ms avec l'animation à box-shadow, ce qui est une amélioration.

En fin de compte, c'est à vous de décider à quoi ressemble votre ombre et quelle méthode vous utiliserez pour la créer.

Animer un pseudo élément

Cette fois, nous allons reproduire l'animation Shadow sans changer la propriété Box-Shadow. D'après les démos précédentes, nous pouvons voir qu'il y a encore beaucoup de repeindre pendant l'animation Shadow. Si vous modifiez les valeurs de la boîte-shadow, 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 réaliserons des animations d'ombre plus performantes.

Donc, après le style de base de la boîte, créez un: après un élément pseudo et donnez-lui un box-shadow, qui sera l'état final de l'ombre après l'animation:

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

Maintenant, tout ce que vous avez à faire est de modifier l'opacité de l'élément pseudo sur: Hover:

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

Regardons-le aux côtés d'une animation d'ombre régulière.

Voir le stylo
Psuedo Shadow par SitePoint (@SitePoint)
sur codepen.

Il n'y a pas grand-chose à faire visuellement ici. La vraie différence réside dans leur performance. Les résultats de l'animation régulière de la boîte à box sont indiqués ci-dessous.

Il a 230 ms de temps de rendu et 211 ms pour la peinture. Maintenant l'animation 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 vaut les tracas.

en utilisant la propriété Transform

Cela s'applique principalement à l'élément principal, la boîte, qui aura l'ombre. L'utilisation de la propriété Transform, au lieu de modifier les propriétés de mise en page comme la marge, réduira la quantité de recalculs de style.

Cette propriété peut être utilisée avec les propriétés de traduction ou d'échelle pour simuler la levée d'un élément de la page, créant l'illusion de la profondeur.

quelques conseils utiles

Il est déjà établi que toute animation qui implique la propriété Box-Shadow affectera les performances. Donc, si vous devez avoir une animation CSS Box Shadow, voici quelques conseils utiles à garder à l'esprit.

Tout d'abord, gardez-les minimal. Ne jetez pas d'ombres sur chaque élément pour le plaisir. Deuxièmement, animer 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é diverses méthodes sur l'animation d'ombres et comparé leurs performances. L'animation des ombres déclenche trois événements - peinture, changements de mise en page et composition - le premier étant le plus tâte.

La solution idéale serait de ne pas animer du tout les ombres (car elles ont l'air bien telles qu'elles sont!). Si vous voulez vraiment animer la propriété Box-Shadow, la modification de l'opacité par opposition à la modification des valeurs de décalage réduira la repensage. La capture est que vous perdrez cette illusion de profondeur que les ombres sont censées fournir. Une autre approche consiste à animer deux calques de shadow de boîte. Cette solution est visuellement agréable et performante, même avec l'ombre supplémentaire.

La dernière option consiste à animer non pas le box-shadow mais un élément pseudo qui fournit une ombre. Cela réduit considérablement la quantité de repeinture et le travail global que le CPU fait dans l'exécution de l'animation. Vous rédigerez plus de code, mais c'est votre meilleur pari pour assurer de bonnes performances.

Contenu connexe:

• comment le CSS: est, où et: les sélecteurs de pseudo-classe fonctionnent
• 10 façons de cacher les éléments dans CSS
• Livre: CSS Master
• REM dans CSS: Comprendre et utiliser des unités REM

FAQ sur CSS Box-Shadow

Qu'est-ce que la box-shadow dans CSS?

Box-Shadow est une propriété CSS qui permet la création d'ombres pour un élément. Il vous permet d'ajouter un effet d'ombre à toute la boîte d'un élément, améliorant son apparence visuelle.

Que signifient les valeurs de la propriété Box-Shadow?

Les valeurs représentent: décalage horizontal: la distance horizontale de l'ombre.
Offset vertical: la distance verticale de l'ombre.
Radius Blur: la quantité de flou appliquée à l'ombre.
Radius d'étalon : Facultatif. La quantité que l'ombre doit être répartie.
Couleur: La couleur de l'ombre.

Puis-je appliquer plusieurs ombres à un élément à l'aide de Box-Shadow?

Oui, vous pouvez appliquer plusieurs ombres en séparant chaque ombre avec une virgule.

Puis-je utiliser Box-Shadow sur n'importe quel élément HTML?

es, vous pouvez appliquer Box-Shadow à la plupart des éléments HTML, tels que des divs, des paragraphes, des en-têtes, etc. Il s'agit d'une propriété polyvalente pour améliorer la présentation visuelle des éléments.

Considérations de performances lorsque vous utilisez Box-Shadow?

Une utilisation excessive des ombres de boîte, en particulier avec de grandes valeurs de flou, peut avoir un impact sur les performances. Il est conseillé d'utiliser les ombres judicieusement pour maintenir une expérience utilisateur fluide, en particulier sur des appareils moins puissants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!