• A la une
  • Catégories
  • Dossiers
  • +

Le BlogDuWebdesign boost l'inspiration des intégrateurs #4

par Benjamin SANCHEZle 11/04/2013

Découvrez sur le Blog du Webdesign 10 animations CSS3 sans javascript !

Les animations et transitions CSS3

Qu'on se le dise, il n'est plus obligatoire d'utiliser du Javascript pour avoir de jolies animations sur son site ! Le CSS3 fournit deux outils vraiment très bien : les transitions et les animations.

Les Transitions ne sont ni plus ni moins qu'un moyen de répartir le changement d'une propriété (par exemple un changement de couleur de texte au survol) dans le temps, pour donner un effet d'apparition, par exemple.

Les animations sont bien plus que ça: Il est possible grace à elles de définir des images clés, et les transitions qui doivent être appliquées pour passer d'une image a l'autre ! Il devient donc possible de créer des animations très complexes comme une intro de site uniquement en CSS par exemple.

Attention, ces deux propriétés ne sont pas supportés par internet explorer 9 et inférieur. Néanmoins, une transition brutale entre deux effets (basiquement la même chose que sans la transition) et une image fixe au lieu d'animées sont des dégradations très acceptables dans la grande majorité des cas.

Pour illustrer ce que l'on peut faire avec tout ça, découvrez 10 animations ne contenant pas de Javascript (ou alors n'utilisant le Javascript que pour des taches annexes, comme détecter un clic).

 

Une animation en forme de diaphragme.

Cet animal anime n'est en fait qu'un seul element !

Ce petit mouton s'anime au passage de la souris

Un effet de loading en un seul element

Cliquez sur une fleche pour l'animation (le Javascript ne sert qu'à détecter le clic)

Cette animation star wars est un vrai cas d'école

Ces cartes mettent en avant un très joli travail sur les z-index

Transition de pages en CSS3

Ce graphe animé vous montrera bien le système de keyframe

Cette animation vous montrera ce que l'on peut faire en peu de temps avec une library en CSS. (oui, une lib en CSS!)

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir