Le meilleur didacticiel transitions CSS3 en 2024, dans ce didacticiel, vous pouvez apprendre transitions CSS3,support du navigateur,Comment ça marche?,Exemples,Exemples,Nombre de changements,Exemples,Propriétés de transition,Exemples,Exemples,
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:
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- |
transition CSS3 est un élément change progressivement d'un style à un autre effet.
Pour ce faire, deux choses doivent être définies:
attribut Largeur appliquée effet de transition, la durée de 2 secondes:
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:
Dispositions applicables lorsque la suspension du pointeur de la souris (: hover) à l'élément <div> lorsque:
Note: Lorsque le curseur de la souris sur l'élément, il change peu à peu son style original
Pour ajouter plus d'un effet du style de changement, ajouter des attributs séparés par des virgules:
Ajout d'effets largeur, hauteur, et 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:
Utilisez toutes les propriétés de transition dans un exemple:
Et des exemples des mêmes effets de transition ci-dessus, mais utilise les propriétés de transition sténographiques: