Exemplu
Treceți cursorul peste un <div> elementul pentru a schimba treptat lățimea de la 100px la 300px:
div
{
width: 100px;
-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
transition: width 2s;
}
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 este o proprietate prescurtare pentru cele patru proprietăți de tranziție:
tranziție-proprietate, de tranziție-durată, de tranziție-sincronizare-funcție, și de tranziție întârziere.
Note: specificați întotdeauna proprietatea de tranziție-durată, în caz contrar durata este 0s, iar tranziția va avea nici un efect.
| Valoare implicită: | all 0s ease 0s |
|---|---|
| Mostenit: | no |
| Animatable: | no. Read about animatable |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.transition="all 2s" 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 | 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: Valori de proprietate Valoare Descriere transition-property Specifică numele proprietății CSS efectul de tranziție este transition-duration Specifică cât de multe secunde sau milisecunde efectul de tranziție ia pentru a finaliza transition-timing-function Specifică curba de viteză a efectului de tranziție transition-delay Definește atunci când efectul de tranziție va începe 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
Atunci când un <input type="text"> devine focalizare, schimba treptat lățimea de la 100px la 250px:
input[type=text] {
width: 100px;
-webkit-transition: ease-in-out, width .35s ease-in-out; /* Safari 3.1 to 6.0 */
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
} Încearcă - l singur »
Pagini similare
Tutorial CSS: CSS3 Treceri
HTML DOM de referință: transition property de transition property