CSS3 Tranziții
Tranzițiile CSS3 vă permite să schimbați valorile de proprietate lin (from one value to another) de (from one value to another) , pe o anumită durată.
Exemplu: Mouse - ul peste elementul de mai jos pentru a vedea un efect de tranziție CSS3:
Suport Browser pentru Tranziții
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit-, -moz- sau -o- specificați 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- |
| 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- |
Cum se utilizează CSS3 Treceri?
Pentru a crea un efect de tranziție, trebuie să specificați două lucruri:
- proprietatea CSS pe care doriți să adăugați un efect
- durata efectului
Note: În cazul în care partea de durată nu este specificată, tranziția va avea nici un efect, deoarece valoarea implicită este 0.
Exemplul următor prezintă o 100px * 100px roșu <div> Element. <div> Elementul a specificat , de asemenea , un efect de tranziție pentru proprietatea lățime, cu o durată de 2 secunde:
Exemplu
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
Efectul de tranziție va începe atunci când proprietatea CSS specificat (width) se modifică valoarea.
Acum, să ne specificați o nouă valoare pentru proprietatea lățime când un utilizator trece cu mouse peste <div> elementul:
Observați că, atunci când cursorul mousuri în afara elementului, se va schimba treptat înapoi la stilul său original.
Schimbarea mai multe valori de proprietate
Următorul exemplu adaugă un efect de tranziție atât lățimea și înălțimea proprietății, cu o durată de 2 secunde pentru lățimea și 4 secunde pentru înălțimea:
Exemplu
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
Încearcă - l singur » Specificați curba de viteză a tranziției
De transition-timing-function de proprietate specifică curba de viteză a efectului de tranziție.
Proprietatea de tranziție-sincronizare-funcție poate avea următoarele valori:
-
ease- specifică un efect de tranziție cu un început lent, apoi rapid, apoi se termina lent (this is default) -
linear- specifică un efect de tranziție cu aceeași viteză de la început până la sfârșit -
ease-in- specifică un efect de tranziție cu un început lent -
ease-out- specifică un efect de tranziție cu un capăt lent -
ease-in-out- specifică un efect de tranziție cu un început lent și sfârșit -
cubic- bezier(n,n,n,n)- vă permite să definiți propriile valori într - un cubic-bezier funcție
Exemplul următor prezintă unele dintre diferitele curbe de viteză care pot fi utilizate:
Exemplu
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;} Încearcă - l singur » Întârzia efectul de tranziție
transition-delay proprietate specifică o întârziere (in seconds) pentru efectul de tranziție.
Următorul exemplu are o întârziere de 1 secundă, înainte de pornire:
Exemplu
div {
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
} Încearcă - l singur » Tranziție + Transformare
Următorul exemplu adaugă, de asemenea, o transformare la efectul de tranziție:
Exemplu
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} Încearcă - l singur » Mai multe exemple de tranziție
Proprietățile de tranziție CSS3 poate fi specificat unul câte unul, așa:
Exemplu
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Încearcă - l singur » sau prin utilizarea proprietății stenografie transition :
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »
Proprietăți de tranziție CSS3
Tabelul de mai jos listează toate proprietățile de tranziție:
| Proprietate | Descriere |
|---|---|
| transition | O proprietate prescurtare pentru stabilirea celor patru proprietăți de tranziție într-o singură proprietate |
| transition-delay | Specifică o întârziere (in seconds) pentru efectul de tranziție |
| transition-duration | Specifică cât de multe secunde sau milisecunde un efect de tranziție ia pentru a finaliza |
| transition-property | Specifică numele proprietății CSS efectul de tranziție este |
| transition-timing-function | Specifică curba de viteză a efectului de tranziție |