Comment créer une rotation continue en CSS ?
Qu'elles s'activent au scroll, au clic ou qu'elles soient continuellement actives, les animations apportent un dynamisme certain à votre site internet. Si vous cherchez une solution légère et performante, le CSS permet de mettre en place divers effets en seulement quelques lignes. Rotation, déplacement ou apparition, les possibilités sont nombreuses mais aussi personnalisables.
Dans cet article, je vous présente l'une des animations les plus connues : la rotation continue. Simple mais efficace, elle permet d'attirer l'œil de votre lecture ou simplement d'apporter du dynamisme en arrière-plan.
Sommaire
Rappel : créer une animation
Pour créer votre animation, vous aurez besoin de la règle @keyframes et de la propriété animation que vous placerez tous les deux dans votre fichier .css.
@keyframes pour créer l'animation (nom, différentes propriétés concernées ainsi que les différentes étapes de l'animation).
animation pour configurer le « comportement » de l'animation (durée, fréquence, etc.) et l'attribuer à un élément.
Si vous cherchez à créer un site internet sur mesure et à y intégrer des animations, je vous invite à consulter les différentes ressources en ligne qui traitent de ces sujets. Elles vous permettront de comprendre en détail le fonctionnement des keyframes, et en particulier les différents paramètres à apporter à la propriété animation.
Créer une rotation continue dans le sens des aiguilles d'une montre
J'ai volontairement ajouté un pseudo-element ::before pour marquer le sens de rotation, mais ce dernier n'est ni obligatoire ni nécessaire. Il ne sert ici qu'à illustrer mes exemples.
@keyframes rotation {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}ou@keyframes rotation {
from{
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}.votreClass {
animation : rotation 6s linear infinite;
}@keyframes : j'utilise la propriété transform : rotate() pour modifier la position de mon élément et lui faire faire un tour complet (360deg).
animation : ici, en plus des éléments classiques tels que la durée, j'ajoute infinite pour l'effet continu. Aussi, l'utilisation de linear rend l'animation plus fluide que ease-out par exemple. Toutefois, vous pouvez adapter selon votre besoin.
Créer une rotation continue dans le sens inverse des aiguilles d'une montre
@keyframes rotation {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}ou@keyframes rotation {
from{
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}.votreClass {
animation : rotation 6s linear infinite reverse;
}Remarque : la partie @keyframes reste inchangée, je viens simplement ajouter la valeur reverse qui permet d'inverser l'animation, d'où son nom.
Créer une rotation continue dans le sens inverse des aiguilles d'une montre
@keyframes rotation {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}ou@keyframes rotation {
from{
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}.votreClass {
animation : rotation 6s linear infinite alternate;
}Remarque : la partie @keyframes reste également inchangée, je viens remplacer la valeur reverse par alternate qui permet d'animer l'objet dans un sens puis dans l'autre.
infinitepour une rotation continue dans le sens des aiguilles d'une montre.
infinite reverse pour une rotation continue dans le sens inverse des aiguilles d'une montre.
infinite alternate pour une rotation alternée.
💡 Pour découvrir plus d'astuces ou tester vos connaissances, n'hésitez pas à consulter le blog.
