Proprietatea transition
Proprietatea transition este o scurtătură pentru
tranzițiile line, permite stabilirea simultană a
transition-duration,
transition-property,
transition-timing-function
și transition-delay.
Sintaxă
selector {
transition: valoare;
}
Ordinea proprietăților nu contează, însă
timpul de execuție (transition-duration)
trebuie să fie înaintea întârzierii (transition-delay).
Valori
Consultați proprietățile corespunzătoare. Valoarea
implicită: all 0s ease 0s.
Valoarea none anulează toate tranzițiile
(acestea vor avea loc instantaneu).
Exemplu
Puneți cursorul mouse-ului peste bloc - timp de 3 secunde
nu se va întâmpla nimic (există o întârziere de
3s), apoi acesta își va modifica lin lățimea
timp de 2 secunde. Dacă apoi îndepărtați cursorul
- din nou timp de 3 secunde nu se va întâmpla
nimic, apoi lățimea se va micșora lin
la valoarea inițială:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition: width 2s ease 3s;
width: 100px;
height: 50px;
}
#elem:hover {
width: 400px;
}
:
Vedeți și
-
proprietatea
animation,
cu ajutorul căreia puteți crea o animație
