Transition

30.10.2011

/!\ Ne fonctionne qu'avec les dernière version de Google Chrome, Mozilla Firefox et Safari (autre navigateur non testé) et ne marche absolument pas avec Internet Explorer

/!\ Ce code n'est pas à la porté des débutant en css. Il faut savoir maitriser les pseudo-classe.

A savoir également que le CSS3 n'étant pas encore correctement implémenter (même dans les dernières versions des navigateur), il faut rajouter un petit truc devant la propriété en question :

"-webkit" fonctionne pour google chrome et safari
"-moz" fonctionne pour mozilla
La dernière ligne est en prévision de quand tout les navigateur reconnaîtrons ce code (c'est pas demain la veille, mais bon)

sélecteur { propriété: valeur;
-webkit-transition-propriety: propriété;
-moz-transition-propriety: propriété;
transition-propriety: propriété}

Le "transition-propriety" indique a quelles propriétés on va appliquer l'effet entre l'état normal et celui survolé/cliqué.

si vous voulez que toutes les propriété soient animé, mettez "all" comme valeur
si vous voulez que seules quelques propriété soient animé, mettez ne nom des propriété séparé par des virgule
si vous ne voulez pas d'animation, mettez "none" comme valeur

sélecteur { propriété: valeur;
-webkit-transition-duration: Xs;
-moz-transition-duration: Xs;
transition-duration: Xs;}

"transition-duration" indique le temps que durera la transition. Vous pouvez donner comme uniqter la seconde (ex: 2s) ou la milliseconde (ex: 30ms).
Si vous avez préciser plusieurs propriété pour la transition, vous pouvez mettre différente durées, séparé par des virgule.

sélecteur { propriété: valeur;
-webkit-transition-timing-function: valeur;
-moz-transition-timing-function: valeur;
transition-timing-function: valeur;}

Le "transition-timing-function" Précise la fonction de transition à utiliser (accélération...) Désolé pour les allergique aux math, mais on va parler fonction X)
Vous pouvez mettre comme valeur un des mot suivant:

ease : Rapide sur le début et ralenti sur la fin.
linear : La vitesse est constante sur toute la durée de l'animation.
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èlere sur la fin.
ease-in-out : Le départ et la fin sont lents.

Pour que ça soit plus simple a comprendre, voici les courbes (emprunté à Alsacréation)

sélecteur { propriété: valeur;
-webkit-transition-delay: Xs;
-moz-transition-delay: Xs;
transition-delay: Xs;}

Le "transition-delay" détermine le départ de la transition. La transition commence par défaut quand l'élément est déclenché (survol, clique...) mais on peu la retarder.

Pour éviter d'encombrer votre page css, on peu raccourcir les code, en notant simplement la propriété "transition"

sélecteur { propriété: valeur;
-webkit-transition: "transition-property" "transition-duration" "transition-timing-function" "transition-delay";
-moz-transition: "transition-property" "transition-duration" "transition-timing-function" "transition-delay";
transition: "transition-property" "transition-duration" "transition-timing-function" "transition-delay";}

Remplacer les propriété "transition-property", "transition-duration"... par leur valeur.