Les animations CSS permettent d’ajouter facilement du mouvement et une touche de dynamisme à un site.

En voici 10 à essayer sans modération dans vos projets de webdesign.

Bulles

Des petites bulles qui traversent l’écran de bas en haut : en voilà une belle animation.

See the Pen Animated – SVG Bubbles by Steven Roberts (@matchboxhero) on CodePen.0

Scrolling de souris

Invitez l’utilisateur à scroller la page grâce à cette animation toute simple représentant une souris et sa molette.

See the Pen Animated – SVG Scrolling Mouse Icon by Steven Roberts (@matchboxhero) on CodePen.0

Vol d’oiseaux

Envie d’égayer une page avec des oiseaux qui traversent l’écran ? Cette animation CSS fera votre bonheur.

See the Pen Animated – SVG Birds by Steven Roberts (@matchboxhero) on CodePen.0

Cercles de chargement

Ces cercles en mouvement qui forment presque une spirale seront parfaits pour marquer un temps de chargement – et complèteront à merveille notre sélection de 10 loaders CSS.

See the Pen Animated – SVG Loader by Steven Roberts (@matchboxhero) on CodePen.0

Chute de neige

Pour donner une atmosphère hivernale à un site, quoi de mieux que quelques flocons de neige ?

See the Pen Animated – SVG Snow by Steven Roberts (@matchboxhero) on CodePen.0

Pulsation

Pour dynamiser un texte, cet effet de pulsation est idéal (cliquez sur « Rerun » pour le voir).

See the Pen Animated – SVG Pulse by Steven Roberts (@matchboxhero) on CodePen.0

Surlignage dynamique

Cette animation permet de surligner un mot ou une phrase de manière élégante au passage de la souris. Dans le même registre, jetez un œil à cette sélection de 30 animations de texte surprenantes.

See the Pen Animated – Text Hover Effect by Steven Roberts (@matchboxhero) on CodePen.0

Bouton avec rotation

Ce bouton (destiné à ouvrir un menu) est doté d’un bel effet de rotation (survolez-le avec la souris pour le déclencher).

See the Pen Animated – SVG Menu Button by Steven Roberts (@matchboxhero) on CodePen.0

Flèche en mouvement

La flèche représentée sur ce bouton glisse sur la droite au passage du curseur, lui donnant un dynamisme certain.

See the Pen Animated – Button by Steven Roberts (@matchboxhero) on CodePen.0

Soulignage esthétique

Cette dernière animation CSS permet tout simplement de souligner du texte, mais avec fluidité et esthétique, la ligne se formant en son milieu.

See the Pen Animated – Menu Underline by Steven Roberts (@matchboxhero) on CodePen.0