Faire pivoter l'animation en CSS

Qu’il s’agisse d’améliorer un bouton, de tuer le temps pendant le chargement de la page ou d’ajouter un peu de style supplémentaire à une page de destination, l’animation est efficace pour retenir l’attention des lecteurs et les ravir sur votre site Web.

Bien qu’il existe différentes méthodes pour ajouter des visuels animés à une page Web, l’une des plus simples consiste à utiliser des animations CSS, qui nécessitent plus qu’un peu de connaissances en HTML et CSS.

Si vous souhaitez utiliser des animations CSS dans votre travail, il est bon de regarder quelques exemples d’animations CSS réussies avant de vous lancer. Cette étude supplémentaire peut vous aider à trouver des idées pour vos projets et vous montrer ce que vous pouvez faire avec cette fonctionnalité essentielle.

Vous aurez besoin de trois choses pour construire une animation CSS :

• Un élément HTML à animer ;
• Une règle CSS qui relie l’animation à cet élément ;
• Une série d’images clés spécifient les styles au début et à la fin de l’animation.

Les déclarations, telles que la vitesse et le délai, peuvent être utilisées pour personnaliser davantage votre animation. Maintenant, regardons quelques exemples d’animation de rotation en CSS.

Utilisez des animations CSS pour faire pivoter l’image en continu

Nous ajouterons la commande CSS à l’élément que nous souhaitons faire pivoter dans cet exemple. Vous pouvez régler les 2s pour ralentir ou accélérer la durée de rotation et effectuer une rotation à 360 degrés dans l’animation.

Exemple:

<img src="/img/DelftStack/logo.png" class="image_rotate" width="200" height="200" />

.image_rotate {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

Sortie : l’image sera pivotée à 360 degrés.

Nous aurons besoin d’un balisage HTML contenant une image et des propriétés pour l’exemple suivant. Comme vous pouvez le voir, notre élément d’image a trois classes : rotate, linear et infinite.

Chaque classe nécessite son bloc de déclaration dans notre CSS. En animation, faites pivoter à 360 degrés et modifiez les 2s pour ralentir ou accélérer la longueur de rotation.

<img src="/img/DelftStack/logo.png" class="rotate linear infinite" width="200" height="200" />

.rotate {
    animation: rotation 4s;
}
.linear {
    animation-timing-function: linear;
}
.infinite {
    animation-iteration-count: infinite;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

Sortie : l’image sera pivotée à 360 degrés.