MISSIONS FREELANCES
HTML & CSS Ressource

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.

Besoin d'un graphiste ?
Trouvez gratuitement un graphiste qualifié et disponible !

Déposez votre annonce

Vous êtes graphiste ? Créer un compte gratuitement

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

Commandez un logo personnalisé
à l'un de nos 30 000 graphistes professionnels
Pour toutes les entreprises et tous les budgets

Commander mon logo

 

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

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

10 animations CSS pour dynamiser un site web
5 (100%) 5 votes

Laissez un commentaire