Propriété transition en CSS3

La propriété transition en CSS3 permet, lors d'un évènement, une transition d'une ancienne valeur CSS à une nouvelle valeur par l'intermédiaire d'une pseudo-classe (hover,focus, etc..) ou par Javascript. Comme la majorité des propriétés en CSS3, celle-ci fonctionne uniquement sur les navigateurs récents et à besoin d'être préfixé (webkit pour Chrome et Safari, -moz- pour Gecko (Mozilla), -ms- pour Microsoft et -o- pour Opera).

Note : les transitions CSS ne sont pas implémentées dans IE9 ni sur les versions antérieures..avec un peut de chance, peut être dans IE10...

L'utilisation de cette propriété nécéssite au minimum 2 éléments qui sont la durée (transition-duration) de l'animation et la (les) propriété(s) à animer (transition-property).

Les propriétés de transition CSS3

transition-property » propriété(s) CSS à transformer.
transition-duration » durée de la transition.
transition-timing-function » fonction de transition à utiliser.
transition-delay » moment du départ de la transition.

La propriété transition-property

La propriété transition-property permet de définir quelle(s) propriété(s) sera affecté(s) par la transition. Celles-ci sont séparées par une virgule.

Le mot-clé all anime toutes les propriétés.
Le mot-clé none indique que aucune propriété ne sera animée.
Liste des propriétés animables » http://www.w3.org/TR/css3-transitions/#properties-from-css-

Exemple :
selecteur{
    -webkit-transition-property: width, padding;
       -moz-transition-property: width, padding;
        -ms-transition-property: width, padding;
         -o-transition-property: width, padding;
            transition-property: width, padding;
}

La propriété transition-duration

La propriété transition-duration indique la durée de transition et est exprimé en seconde ou milliseconde.

Exemple :
selecteur{
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
}
Démonstration (survolez le cadre) :

transition-property: background, width, height;
transition-duration: 2s;

Code de l'exemple:
#transition-property{
width:300px;
height:50px;
padding:5px;
background:yellow;
 
/*Propriétés affectés*/
-webkit-transition-property: background, width, height;/*Chrome et Safari*/
-moz-transition-property: background, width, height;/*Gecko*/
-ms-transition-property: background, width, height;/*Microsoft*/
-o-transition-property: background, width, height;/*Opera*/
transition-property: background, width, height;/*Standart*/
 
/*Duré de la transition*/
-webkit-transition-duration: 2s;/*Chrome et Safari*/
-moz-transition-duration: 2s;/*Gecko*/
-ms-transition-duration: 2s;/*Microsoft*/
-o-transition-duration: 2s;/*Opera*/
transition-duration: 2s;/*Standart*/
}
 
#transition-property:hover{
background:green;
width:500px;
height:100px;
}
Dans l'exemple ci-dessus, on indique à la propriété transition-property que la propriété background, width et height sont affectées par la transition. On indique également via la propriété transition-duration que sa durée est de 2 secondes.

La propriété transition-timing-function

La propriété transition-timing-function spécifie la courbe de vitesse de l'effet de transition. Cette propriété n'est pas supportée dans tous les navigateurs (IE) au moment de ce tutoriel.

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.

La courbe de Bézier permet de définir par l'intermédiaire de 4 chiffres comprit entre 0 et 1, l'accélération ou décélération de la transition.

A voir :
Courbe de Bézier
Générateur cubic-bezier

Exemple 1 :
selecteur{
    -webkit-transition-timing-function: linear;
       -moz-transition-timing-function: linear;
        -ms-transition-timing-function: linear;
         -o-transition-timing-function: linear;
            transition-timing-function: linear;
}
Exemple 2 :
selecteur{
    -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);
}
Démonstration (survolez les cadres) :
linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier

La propriété transition-delay

La propriété transition-delay précise quand l'effet de transition va commencer. La valeur transition-delay est défini en secondes (s) ou en millisecondes (ms).

Exemple :
selecteur{
    -webkit-transition-delay: 2s;
       -moz-transition-delay: 2s;
        -ms-transition-delay: 2s;
         -o-transition-delay: 2s;
            transition-delay: 2s;
}

 Tout sur une ligne...

Il est tout a fait possible de rassembler ces différentes propriétés sur une seule ligne.

Syntaxe :
transition: property duration timing-function delay;
Exemple :
selecteur{
    -webkit-transition: padding-left 3s linear 1s;
       -moz-transition: padding-left 3s linear 1s;
        -ms-transition: padding-left 3s linear 1s;
         -o-transition: padding-left 3s linear 1s;
            transition: padding-left 3s linear 1s;
}
Avec plusieurs transitions, il suffit de séparer chaque "bloc" de transition par une virgule.

Syntaxe :
transition: property duration timing-function delay , property duration timing-function delay;
Démonstration (survolez le cadre) :

;)

Code de l'exemple :
.teste{
width:50px;
height:50px;
background:green;
text-align:center;
font-size : 0px;
transition: margin-left 3s linear 1s , background 2s ease-out 4s ,  font-size 2s ease-out 6s;
-webkit-transition: margin-left 3s linear 1s , background 2s ease-out 4s , background 2s ease-out 4s ,  font-size 2s ease-out 6s;
-moz-transition: margin-left 3s linear 1s , background 2s ease-out 4s , background 2s ease-out 4s ,  font-size 2s ease-out 6s;
-o-transition: margin-left 3s linear 1s , background 2s ease-out 4s , background 2s ease-out 4s ,  font-size 2s ease-out 6s;
-ms-transition: margin-left 3s linear 1s , background 2s ease-out 4s , background 2s ease-out 4s ,  font-size 2s ease-out 6s;
}
.teste:hover{
margin-left:160px;
background:yellow; 
font-size:40px;
}
Voir/déposer un commentaire (0) | Signaler un problème