Les transitions ? Qu'est-ce que c'est ? Et particulièrement, quelle est son utilité ?

Les transitions sont les propriétés qui agissent directement ou indirectement sur vos images, vos blocs ou simplement vos écritures.

Il existe :

- transition-property : elle agit directement sur les propriétés comme height, width et background
- transition-duration : celle-ci contrôle la durée de l'animation.
- transition-timing-function : ici, c'est la courbe de vitesse de la transition qui est concernée, accélération ou non.
- transition-delay : cette transition concerne le départ de l'effet.




Exemple avec un rectangle.



Css

Code:

/* rectangle transition*/

.rectangle {width: 200px;
height: 100px;
background-color: #000000;}

.rectangle:hover {transition-property  : width, height, background-color;
width: 400px;
height: 200px;
background-color: #ffffff;}

Html

Code:

<div class="rectangle"></div>

Exemple avec un titre.



css

Code:

/*titre transition*/

.titre_transition {font-size: 15px;
border-bottom: 2px #000000 dotted;
  width: 200px;}

.titre_transition:hover {font-size: 18px;
  transition-property  : width, font-size, border;
border-bottom: 3px #ffffff dotted;
  width: 300px;}

Html

Code:

<div class="titre_transition">Never Utopia</div>

En cliquant sur le rectangle ou le titre, vous les voyez s’agrandir. Cependant, pour l'instant, l'effet n'est pas très agréable.




Si je vous rajoute la durée sur le rectangle suscité plus haut, vous aurez un effet bien plus agréable.

Code:

/* rectangle transition*/

.durée {-o-transition-duration: 2s;
webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
transition-duration: 2s;}

Html

Code:

<div class="durée rectangle"></div>

Et pour le titre.

Code:

<div class="titre_transition">Never Utopia</div>

L'effet pour les deux demeure bien plus sympathique.

Vous pouvez réitérez l'expérience de la durée en utilisant à la place du width, un transform: letter-spacing ou avec un margin.




Cette transition comporte plusieurs propriétés

linear : La vitesse est constante sur toute la durée de l'animation.
ease : Rapide sur le début et ralenti sur la fin.
ease-in : Lent sur le début et accélère de plus en plus vers la fin.
ease-out : Rapide sur le début et décélère sur la fin.
ease-in-out : Le départ et la fin sont lents.
cubic-bezier(x,x,y,y) : Vous définissez vous même la courbe.

Avec le rectangle



Css

Code:

/*transition timing function*/

.transition2 { -webkit-transition-timing-function: cubic-bezier(0,0,1,1);
      -moz-transition-timing-function: cubic-bezier(0,0,1,1);
        -ms-transition-timing-function: cubic-bezier(0,0,1,1);
        -o-transition-timing-function: cubic-bezier(0,0,1,1);
            transition-timing-function: cubic-bezier(0,0,1,1);}

Html

Code:

<div class="durée rectangle transition2"></div>

Css

Code:

/*transition delay*/

.transition3 {  -webkit-transition-delay: 1s;
      -moz-transition-delay: 1s;
        -ms-transition-delay: 1s;
        -o-transition-delay: 1s;
            transition-delay: 1s;
}

Html

Code:

<div class="durée rectangle transition2 transition3"></div>

Sachez une chose, vous pouvez remplacer le tout par :

Code:

transition: property duration timing-function delay;

Voilà, vous connaissez le secret des transitions. Avec un peu de curiosité, vous pouvez même tester autre chose. ^^ Comme avec les padding, l'espacement de lettres, les margins. Vous verrez, ce n'est pas difficile.

Je vous conseil ces sites pour enrichir d'avantage vos connaissances sur les transitions et les autres effets.

- http://creer-un-site.fr/propriete-transition-en-css3-270.php
- http://css.mammouthland.net/css3/animation-transition.php
- http://www.css3create.com/Les-Transitions