Animation CSS

Une animation CSS fait évoluer les styles d'un élément dans le temps, en suivant des keyframes, pour créer du mouvement comme des fondus, des glissements, des pulsations ou des boucles. Elle s'exécute directement dans le navigateur sans JavaScript, ce qui la rend légère et fluide pour les effets d'interface.

Keyframes et propriétés d'animation

Une animation a deux parties : une règle @keyframes qui décrit les styles à différents moments (de 0 % à 100 %), et une déclaration animation qui les joue sur l'élément.

• @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
• animation: fade 300ms ease-in-out;
• Sous-propriétés : animation-duration, -timing-function, -delay, -iteration-count, -direction, -fill-mode.

Animation ou transition

Les deux ajoutent du mouvement, mais se déclenchent et se construisent différemment.

Durée, répétition et remplissage

Au-delà de la durée, quelques propriétés façonnent le ressenti. animation-iteration-count: infinite la met en boucle, animation-direction: alternate la joue en aller-retour, et animation-fill-mode: forwards conserve l'état final après la fin. La fonction de temporisation (ease, linear, une courbe cubic-bezier personnalisée ou steps() pour un rendu image par image) contrôle le rythme.

Performance et accessibilité

Animer transform et opacity est fluide car le navigateur peut les déléguer au GPU, alors qu'animer des propriétés de mise en page comme la largeur ou le haut peut provoquer des saccades. Pour l'accessibilité, respectez le réglage prefers-reduced-motion afin d'offrir une expérience plus calme aux personnes sensibles au mouvement.

CSS, JavaScript, Lottie ou Rive

Utilisez le CSS pour un mouvement simple et décoratif. Passez à JavaScript ou à une bibliothèque comme GSAP pour un séquençage complexe ou de l'interactivité. Pour une animation vectorielle riche créée par un designer, exportez depuis des outils comme Lottie ou Rive et intégrez-la, en gardant la couche CSS légère.

L'animation CSS chez BeBranded

Chez BeBranded, nous utilisons le mouvement avec intention : des animations sobres et performantes qui guident l'attention sans ralentir la page. Pour un mouvement plus riche, nous combinons le CSS avec des outils comme Lottie ou Rive, dans le cadre de notre travail de design.