Navigation

Toutes les catégories

Voir les derniers articles

10 animations CSS pour dynamiser un site web

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...

Publié par Leo Chatillon

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

Lire la suite de l'article
Afficher les commentaires (0)

Commentaires

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

Pourquoi les designers ne doivent pas abandonner le papier et le crayon ?

De nos jours, il est quasiment impensable de concevoir un design, pour quelque projet que ce soit, sans utiliser des logiciels adéquats. Les graphistes, dessinateurs et...

Publié le par Leo Chatillon
Graphisme

10 exemples de logos pour galerie d’art

Vous cherchez l’inspiration pour créer un logo dédié à une galerie d’art ? Pour faire honneur aux tableaux, sculptures et autres...

Publié le par Leo Chatillon