CSS3 Transitions
transitions CSS3 vous permet de modifier les valeurs de propriété en douceur (d'une valeur à une autre), sur une durée donnée.
Exemple: la souris sur l'élément ci - dessous pour voir un effet de transition CSS3:
Support du navigateur pour Transitions
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit-, -moz- ou -o- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Comment utiliser CSS3 Transitions?
Pour créer un effet de transition, vous devez spécifier deux choses:
- la propriété CSS que vous souhaitez ajouter un effet à
- la durée de l'effet
Remarque: Si la partie de la durée est pas spécifiée, la transition sera sans effet, parce que la valeur par défaut est 0.
L'exemple suivant montre un 100px * 100px rouge <div> élément. Le <div> élément a également précisé un effet de transition pour la propriété largeur, d'une durée de 2 secondes:
Exemple
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
L'effet de transition commencera lorsque la propriété CSS spécifiée (largeur) change de valeur.
Maintenant, précisons une nouvelle valeur pour la propriété width lorsqu'un utilisateur passe la souris sur le <div> élément:
Notez que lorsque les souris du curseur sur l'élément, il va progressivement revenir à son style original.
Changer Plusieurs valeurs de propriété
L'exemple suivant ajoute un effet de transition pour la largeur et la propriété de hauteur, avec une durée de 2 secondes pour la largeur et 4 secondes pour la hauteur:
Exemple
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
Essayez - le vous - même » Spécifiez la courbe de vitesse de la transition
La transition-timing-function propriété indique la courbe de vitesse de l'effet de transition.
La propriété transition-timing-function peut avoir les valeurs suivantes:
-
ease- spécifie un effet de transition avec un démarrage lent, puis rapide, puis finissent lentement (ce qui est par défaut) -
linear- spécifie un effet de transition avec la même vitesse du début à la fin -
ease-in- spécifie un effet de transition avec un démarrage lent -
ease-out- spécifie un effet de transition avec une extrémité lente -
ease-in-out- spécifie un effet de transition avec un démarrage lent et à la fin -
cubic-bezier(n,n,n,n)- vous permet de définir vos propres valeurs dans un cubic-bezier fonction
L'exemple suivant montre la partie des différentes courbes de vitesse qui peuvent être utilisés:
Exemple
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;} Essayez - le vous - même » Retarder l'effet de transition
La transition-delay propriété spécifie un délai (en secondes) pour l'effet de transition.
L'exemple suivant a un délai de 1 seconde avant le démarrage:
Exemple
div {
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
} Essayez - le vous - même » Transition + Transformation
L'exemple suivant ajoute également une transformation à l'effet de transition:
Exemple
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} Essayez - le vous - même » Autres exemples de transition
Les propriétés de transition CSS3 peuvent être spécifiées une par une, comme ceci:
Exemple
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Essayez - le vous - même » ou en utilisant la propriété raccourcie transition :
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »
Propriétés de transition CSS3
Le tableau suivant répertorie toutes les propriétés de transition:
| Propriété | La description |
|---|---|
| transition | Un raccourci pour définir les quatre propriétés de transition en une seule propriété |
| transition-delay | Indique un délai (en secondes) pour l'effet de transition |
| transition-duration | Indique le nombre de secondes ou en millisecondes un effet de transition nécessaire pour terminer |
| transition-property | Indique le nom de la propriété CSS l'effet de transition est pour |
| transition-timing-function | Indique la courbe de vitesse de l'effet de transition |