Exemplu
Treceți cursorul peste un <div> element și modifica lățimea cu un efect de tranziție lină:
div
{
-webkit-transition-property: width; /* Safari */
transition-property: width;
}
div:hover {
width: 300px;
} Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea de tranziție-proprietate specifică numele proprietății CSS efectul de tranziție este pentru (the transition effect will start when the specified CSS property changes) de (the transition effect will start when the specified CSS property changes) de (the transition effect will start when the specified CSS property changes) .
Tip: Un efect de tranziție ar putea apărea în mod tipic atunci când un utilizator Hover peste un element.
Note: specificați întotdeauna proprietatea de tranziție-durată, în caz contrar durata este 0, iar tranziția va avea nici un efect.
| Valoare implicită: | all |
|---|---|
| Mostenit: | no |
| Animatable: | no. Read about animatable |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.transitionProperty="width,height" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit-, -moz- sau -o- specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| transition-property | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
CSS Sintaxa
transition-property: none|all| Valori de proprietate Valoare Descriere none Nici o proprietate va obține un efect de tranziție all Valoare implicită. Toate proprietățile vor primi un efect de tranziție property Definește o listă separată prin virgulă de CSS numele de proprietate efectul de tranziție este de initial Setează această proprietate la valoarea implicită. Citiți despre inițială inherit Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc
Mai multe exemple
Exemplu
Plasați cursorul pe un <div> element și modificați lățimea și înălțimea , cu un efect de tranziție lină:
div {
-webkit-transition-property: width, height; /*
Safari */
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
} Încearcă - l singur »
Pagini similare
Tutorial CSS: CSS3 Treceri
HTML DOM referință: transitionProperty property