Proprietatea transition-property
Proprietatea transition-property stabilește
proprietatea care va fi animată cu o tranziție
lină transition. Ca valoare trebuie
specificat numele proprietății CSS care va fi
animată. Dacă setați valoarea all
(este setată implicit) - toate proprietățile
vor fi animate simultan.
Sintaxă
selector {
transition-property: valoare;
}
Exemplu
Treceți mouse-ul peste bloc - acesta își va schimba
lină lățimea, deoarece transition-property
are valoarea width:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Exemplu . Valoarea all
În acest exemplu transition-property
are valoarea all - de aceea toate
proprietățile specificate pentru starea
hover (în cazul nostru
width și height) se vor schimba
lin. Toate modificările
vor avea loc în același timp, care este stabilit
în transition-duration:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: all;
height: 25px;
width: 100px;
}
#elem:hover {
height: 50px;
width: 400px;
}
:
Vezi și
-
proprietatea
transition-duration,
care stabilește durata tranziției line -
proprietatea
transition-delay,
care stabilește întârzierea înaintea tranziției line -
proprietatea
transition-timing-function,
care stabilește funcția de timing pentru tranziția lină -
proprietatea
transition,
care este o prescurtare pentru tranziția lină -
proprietatea
animation,
cu ajutorul căreia puteți crea o animație