Les animations CSS permettent d’ajouter facilement du mouvement et une touche de dynamisme à un site.
Pour vous démarquer sur internet, il peut être intéressant d’ajouter des animations discrètes pour rendre la navigation des internautes plus agréable.
En voici 10 à essayer sans modération dans vos projets de webdesign !
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.
See the Pen Animated – SVG Bubbles by Steven Roberts (@matchboxhero) on CodePen.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Lire aussi : Inspiration : 15 transitions CSS pour les pages de votre site
Notre astuce pour créer des animations CSS originales
Vous avez, grâce à ces exemples, déjà de bonnes bases pour ajouter des animations à votre site.
Si vous souhaitez ajouter des animations 100% personnalisées aux couleurs de votre site, confiez un projet à un webdesigner freelance sur Graphiste.com !
Déposez un projet gratuitement sur la plateforme pour recevoir des propositions de webdesigners professionnels !
