Animation Css par @keyframes

Temps de lecture : 2 minutes

L’animation webdesign via CSS, notamment avec l’implémentation de @keyframes, marque une étape significative dans l’évolution du design web.

Introduites avec CSS3, les animations CSS permettent aux concepteurs de créer des animations complexes et interactives directement dans le navigateur, sans dépendre de technologies supplémentaires comme Flash.

Le principe de @keyframes repose sur la définition de points clés (keyframes) qui spécifient les styles à différents moments de l’animation, permettant ainsi de contrôler finement le déroulement et le comportement visuel des éléments de la page.

Cette fonctionnalité a non seulement enrichi l’expérience utilisateur en offrant des interfaces plus dynamiques et réactives, mais a également ouvert la voie à une plus grande créativité dans le domaine du webdesign, rendant les pages web plus attractives et interactives tout en restant légères et accessibles.

Animation de l’arrière plan et d’une boite avec un ombrage

Ce code crée une page web avec une boîte animée au centre d’un arrière-plan également animé.

Fonctionnement de l’animation :

• La couleur de fond de body alterne entre les couleurs spécifiées dans @keyframes change-color toutes les 2,5 secondes.
• La boîte dans .container subit une transformation d’échelle et de modification de l’ombre sur une période de 5 secondes.

See the Pen CSS transition 00 by Jerome Mercier (@jmercier) on CodePen.0

Le code commenté

body { animation: change-color 2.5s ease-in infinite; } : Applique une animation à l’élément body, qui change la couleur de fond du corps de la page en boucle.

• @keyframes change-color { ... } : Définit l’animation change-color qui fait varier la couleur de fond entre trois états (#faedcd, #ccd5ae, #faedcd) à 0%, 50% et 100% de l’animation.
• @keyframes change-box { ... } : Définit l’animation change-box qui change l’échelle et l’ombre de la boîte .box.
• .container { ... } : Style pour le conteneur, le rendant flex et centrant son contenu verticalement et horizontalement, avec une hauteur de 100% du viewport (vh).
• .box { ... } : Définit le style et l’animation pour la boîte. L’animation change la taille (échelle) et l’ombre de la boîte de manière continue.

Ressources