AccueilActualitésinspirationLe BlogDuWebdesign boost l’inspiration des intégrateurs #4 inspiration Le BlogDuWebdesign boost l’inspiration des intégrateurs #4 Publié le 11/04/2013 Partager cet article : Partager sur Facebook Partager sur Twitter Partager sur Linkedin Share on pinterest 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!) By Benjamin Sanchez Laisser un commentaire Annuler la réponseVotre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *Comment Nom * E-mail* Site web Enregistrer mon nom, mon e-mail et mon site dans le navigateur pour mon prochain commentaire.