09décembre2015

Dynamiser votre site avec les animations CSS

L’être humain est comme ça, il aime le mouvement, et les petits gadgets visuels. Surtout sur internet.
Pendant un bon moment, faire des animations sur son site impliquait forcément du « Flash ». ( souvenez vous … )

Maintenant que le Flash a été bannis des habitudes web ( notamment par Apple et ses iDevices) , il a fallu se tourner vers d’autres technologies.
L’une d’elle, déjà largement utilisée pour le design, est beaucoup moins connue pour faire des animations: il s’agit du CSS3.

Voici donc une petite liste non exhaustive de transitions et animations CSS3, afin de vous puissiez découvrir ce qu’il est possible de faire ( et vous donner un peu d’inspiration). Par contre , n’oubliez pas cette règle très importante : « Trop d’animations, tue l’animation… ». Il faut rester subtil !

Des boutons

 





Des vignettes de photos

Ceci est un cheesecake
Ceci est un cheesecake

Ceci est un cheesecake

Ceci est un cheesecake

Exemple de menu

 

Des animations de chargement

Évidemment, ce ne sont ici que quelques exemples mais la liste est bien plus longue.
Cela vous permet déjà de travailler certains détails sur votre site et d’y apporter une nouvelle dynamique !

FacebookTwitterLinkedInGoogle+

A PROPOS DE L'AUTEUR

Co-fondateur de Mekalab , Benjamin BUFFARD est un passionné de nouvelle technologie et d'innovation. Son rôle de directeur technique l’amène à s'informer sur les dernières nouveautés en terme de développement et d’expérience utilisateur.