transitions CSS3
transitions CSS3
CSS3, nous devons ajouter un effet qui peut être converti d'un style à un autre moment, sans l'utilisation d'une animation Flash ou JavaScript. Passez la souris sur les éléments suivants:
Passez la souris sur les éléments suivants:
transition
support du navigateur
Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.
Immédiatement après la -webkit- numérique, -ms- ou -moz- il y a à l'appui du préfixe d'attribut premier numéro de version du navigateur.
| 属性 | |||||
|---|---|---|---|---|---|
| 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 ça marche?
transition CSS3 est un élément change progressivement d'un style à un autre effet.
Pour ce faire, deux choses doivent être définies:
- Je veux ajouter l'effet des propriétés CSS
- Indiquez la durée de l'effet.
Exemples
attribut Largeur appliquée effet de transition, la durée de 2 secondes:
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
Remarque: Si vousne spécifiez pas de limite de temps, la transition sera sans effet, parce que la valeur par défaut est 0.
L'effet va changer la valeur des changements de propriété CSS spécifiées. Un typique changement propriété CSS est l'utilisateur souris sur un élément:
Exemples
Dispositions applicables lorsque la suspension du pointeur de la souris (: hover) à l'élément <div> lorsque:
{
width: 300px;
}
Essayez »
Note: Lorsque le curseur de la souris sur l'élément, il change peu à peu son style original
Nombre de changements
Pour ajouter plus d'un effet du style de changement, ajouter des attributs séparés par des virgules:
Exemples
Ajout d'effets largeur, hauteur, et de transition:
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
Essayez »
Propriétés de transition
Le tableau suivant répertorie toutes les propriétés de transition:
| propriété | description | CSS |
|---|---|---|
| transition | raccourci pour définir quatre propriétés de transition dans une propriété. | 3 |
| transition-propriété | Le nom de la transition de propriété CSS dispositions sont applicables. | 3 |
| la durée de transition | Pour définir la durée de l'effet de transition passé. La valeur par défaut est 0. | 3 |
| transition-timing-function | Prédéterminé transition courbe de durée de l'effet. La valeur par défaut est "facilité". | 3 |
| la transition à retard | Dispositions quand commencer l'effet de transition. La valeur par défaut est 0. | 3 |
Les deux exemples suivants présentent tous les attributs de transition:
Exemples
Utilisez toutes les propriétés de transition dans un exemple:
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
Essayez »
Exemples
Et des exemples des mêmes effets de transition ci-dessus, mais utilise les propriétés de transition sténographiques:
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
Essayez »