Tous les effets de transitions css (hover..)

Créer une transition en css

Quelques effets de transitions css incontournables

Avant le CSS3, beaucoup de petits effets s’effectuaient à l’aide du javascript; heureusement maintenant, on peut créer très facilement des transitons en CCS avec des pseudo-classes telles hover, focus, visited ou juste les propriétés de transition

Dans le webdesign, les transitions et petits effets peuvent améliorer l’expérience et le parcours du visiteur sur un site.  On peut aujourd’hui très facilement en CCS3 animer des éléments avec le CSS et obtenir des effets sympas sur son site.

Concrètement, les transitions vont nous permettre, quand un événement est déclenché (lien hover, visited..) de changer les valeurs des propriétés CSS dans le temps (état de départ et état d’arrivée), de manière progressive selon une courbe de temps donnée.

Les propriétés css à utiliser

  • La super-propriété (raccourci) transition :
  • transition-property :  on définit les propriétés CSS à animer
  • transition-delay : durée avant que la transition ne commence (début animation)
  • transition-duration : durée totale de la transition ( en secondes, millisecondes).
  • transition-timing-function : méthode d’interpolation : façon dont va se dérouler l’animation (décélération, accélération)

 

Effet de transition sur un menu

Image contre texte au survol
Opacité sur un élément au survol
Changer la couleur d'un élément au survol
Effet de zoom au survol d'un élément
Effet de zoom inverse (rétrécissement)
Effet de rotation
Changer la forme de l'élément au survol
Insérer une bordure intérieure au survol de l'élément
Effet de bordure en 3D au survol de l'élément

 

VOIR AUSSI
Partagez ce contenu !Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPrint this pageEmail this to someone
Votes sur cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *