les transitions CSS3 par l'exemple

les transitions sont de nouvelles propriétés de la norme CSS3 qui permettent de mettre en place des effets (de transition) entre différents états.

  • pour navigateur webkit:
    • -webkit-transition: propriété css(border, background, all, color, etc) durée easing_function
      • ou
        -webkit-transition-property: propriété css;
      • -webkit-transition-duration: durée;
      • -webkit-transition-timing-function: easing_function;
  • pour navigateur opera:
    • -o-transition: propriété css(all, color, etc) durée easing_function
      • ou
        -o-transition-property: propriété css;
      • -o-transition-duration: durée;
      • -o-transition-timing-function: easing_function;
      • -o-transition-delay: delai;
  • pour navigateur mozilla (il faut attendre une version nightly de firefox qui permette d'utiliser les transitions. A ce jour aucune version n'est compatible):
    • -moz-transition: propriété css(border, background, all, color, background-image, etc) duration easing_function
      • ou
        -moz-transition-property: source;
      • -moz-transition-duration: durée;
      • -moz-transition-timing-function: easing_function;

Exemple de transition sur la couleur de lien

Sur un mouse over, la couleur change via un transition d'une certaine durée sur la couleur.

Code CSS

.menuTransition a{     padding:10px;     color:#666;     text-decoration:none;     -webkit-transition: color .6s ease-in;     -moz-transition: color .6s ease-in;     -o-transition: color .6s ease-in;     transition: color .6s ease-in; } .menuTransition a:hover{     color:#006699; } <div class="menuTransition">     <a href="#">A propos</a>     <a href="#">Accueil</a>     <a href="#">CSS3</a>     <a href="#">HTML5</a> </div>

Exemple de transition sur la couleur de lien et le fond

Sur un mouse over, la couleur et la couleur de fond changent via un transition d'une certaine durée sur la couleur.

Code CSS

.menuTransitionBackground a{     padding:10px;     color:#666;     text-decoration:none;     background:#ddd;     -webkit-transition: all .6s ease-in;     -moz-transition: all .6s ease-in;     -o-transition: all .6s ease-in;     transition: all .6s ease-in; } .menuTransitionBackground a:hover{     color:#fff;     background:#006699; } <div class="menuTransitionBackground">     <a href="#">A propos</a>     <a href="#">Accueil</a>     <a href="#">CSS3</a>     <a href="#">HTML5</a> </div>

Exemple de transition sur les bordures

Sur un mouse over, la taille de la bordure augmente via un transition d'une certaine durée.

Code CSS

.menuTransitionBorder{     height:50px; } .menuTransitionBorder a{     padding:10px;     color:#666;     text-decoration:none;     border-bottom:1px solid #006699;     -webkit-transition: border .6s ease-in;     -moz-transition: border .6s ease-in;     -o-transition: all .6s ease-in;     transition: border .6s ease-in; } .menuTransitionBorder a:hover{     border-bottom:20px solid #006699; } <div class="menuTransitionBorder">     <a href="#">A propos</a>     <a href="#">Accueil</a>     <a href="#">CSS3</a>     <a href="#">HTML5</a> </div>

Voici une variante avec 2 bordures

Code CSS

.menuTransitionDoubleBorder{     height:50px; } .menuTransitionDoubleBorder a{     padding:10px;     color:#666;     text-decoration:none;     border-top:1px solid #fff;     border-bottom:1px solid #006699;     -webkit-transition: border .6s ease-in;     -moz-transition: border .6s ease-in;     -o-transition: all .6s ease-in;     transition: border .6s ease-in; } .menuTransitionDoubleBorder a:hover{     border-top:1px solid #006699;     border-bottom:20px solid #006699; } <div class="menuTransitionDoubleBorder">     <a href="#">A propos</a>     <a href="#">Accueil</a>     <a href="#">CSS3</a>     <a href="#">HTML5</a> </div>

Conclusion

En conclusion, les transitions permettent d'augmenter le dynamisme d'une page web sans utiliser de javascript à condition d'avoir un navigateur moderne qui le permette.

retourner en haut de la page