HTML & CSS Ressources

10 animations CSS pour dynamiser un site web

animations css
Publié par Léo 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.

Bon à savoir
Besoin d’un web design pour animer le site de votre entreprise ? Faites appel à un webdesigner freelance disponible immédiatement ! Déposez votre annonce gratuitement sur Graphiste.com.

 

Bulles

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

 

Scrolling de souris

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

 

Vol d’oiseaux

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

 

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.

 

Chute de neige

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

 

Pulsation

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

 

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.

 

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). De nombreuses autres animations CSS existent pour dynamiser vos boutons.

 

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.

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.

 

1 Commentaire

  • Bonjour,
    Merci pour les idées originales pour dynamiser un site web.
    Je suis entrain de créer un site web et je suis intéressée par le thème Vol d’oiseaux mais à la place des oiseaux, j’aimerais un avion qui passe. Est-ce que cela est facilement faisable ? Pourriez-vous me donner la modification à faire s’il vous plait ? Je vous remercie par avance. Cordialement.
    Sophie

Laissez un commentaire

Recevez sur votre boîte mail

Toutes les clés pour un branding réussi

  • Des conseils et ressources sur le design
  • Des livres blancs et tutoriels pour apprendre
  • Les nouveautés et tendances à suivre

Zéro spam, désinscription à tout moment