CSS3 Effet de transition

CSS3La fonction de transition permet que les changements de valeurs des propriétés CSS se produisent de manière lisse pendant une période spécifiée.

Comprendre CSS3Transition

Souvent, lorsque la valeur d'une propriété CSS change, le résultat affiché est mis à jour immédiatement. Un exemple commun est de changer la couleur de fond du bouton au survol de la souris. Normalement, lorsque le curseur est placé sur le bouton, la couleur de fond du bouton change immédiatement de l'ancienne valeur à la nouvelle valeur.

CSS3a introduit une nouvelle fonction de transition qui vous permet de faire transitionner les propriétés de l'ancienne valeur à la nouvelle valeur au fil du temps de manière lisse.

L'exemple suivant vous montrera commentbackground-colorAnimation lorsque le curseur est sur le bouton HTML.

button　{
　　　　background:　#fd7c2a;
　　　　/*　Pour　Safari　3.0+　*/
　　　　-webkit-transition-property: background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property: background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

Vous devez spécifier au moins deux propriétés transition-property et transition-duration (supérieure à 0), pour qu'elles produisent un effet de transition. Mais, toutes les autresPropriétés de transitionSont optionnelles, car leurs valeurs par défaut ne bloquent pas l'animation.

Exécuter plusieurs transitions

Toutes les propriétés de transition peuvent utiliser plusieurs valeurs, séparées par des virgules, ce qui permet de définir plusieurs transitions avec des réglages différents en une seule fois.

button　{
　　　　background:　#fd7c2a;
　　　　border:　3px solid #dc5801;
　　　　/*　Pour　Safari　3.0+　*/
　　　　-webkit-transition-property: background, border;
　　　　-webkit-transition-duration:　1s,　2s;
　　　　
　　　　transition-property: background, border;
　　　　transition-duration:　1s,　2s;
}
button:hover　{
　　　　background:　#3cc16e;
　　　　border-color:　#288049;
}

Propriété abrégée de transition

De nombreuses propriétés doivent être prises en compte lors de l'application de la transition. Cependant, il est également possible de spécifier toutes les propriétés de transition dans une seule propriété pour raccourcir le code.

Les propriétés de transition sont une propriété abrégée qui permet de définir toutes les propriétés de transition individuelles (c'est-à-dire la propriété abrégée transition-property, transition-duration, transition-timing-function et transition-delay dans l'ordre indiqué).

Lorsque vous utilisez cette propriété, assurez-vous de suivre cette séquence de valeurs.

button　{
　　　　background:　#fd7c2a;
　　　　-webkit-transition:　background　2s　ease-in　0s;　/*　Pour　Safari　3.0+　*/
　　　　transition:　background　2s　ease-in　0s;　
}
button:hover　{
　　　　background:　#3cc16e;
}

CSS3Propriétés de transition

Le tableau suivant résume brièvement toutes les propriétés de transition :