How to animate "box-shadow" with silky smooth performance | Tobias Ahlin
Les animations CSS sont cool, mais parfois gourmandes en ressources. Ici une astuce pour améliorer les performances quand on veut animer une box-shadow sur un bloc au :hover.
Au lieu de faire
#box {
box-shadow: 4px 4px 4px transparent;
transition: box-shadow 1s ease;
}
#box:hover {
box-shadow: 4px 4px 4px silver;
}
Préférez d’ajouter un ::after sur le block, avec une ombre fixe.
Ensuite, mettez la transition sur l’opacité du ::after.
Le truc c’est que les moteurs de rendus ne calculent que l’opacité du ::after, et non l’ombre qui est bien plus lourde à produire et donc à animer (car elle dépend de plein de choses, dont les dimensions du bloc.
#box {
position: relative;
}
#box::after {
content: "";
position: absolute;
z-index: -1;
top: 0; bottom: 0; left: 0; right: 0;
box-shadow: 4px 4px 4px silver;
opacity: 0;
transition: box-shadow 1s ease;
}
#box::after:hover {
opacity: 1;
}