Proprietatea transition-duration

Proprietatea transition-duration stabilește durata de execuție a tranziției line transition.

Sintaxă

cssselector {
  transition-duration: timp în s sau ms;
}

Valori

Valoare	Descriere
`s`	Stabilește timpul în secunde (de exemplu `3s`). Se pot stabili valori fracționale, de exemplu, `0.5s` - jumătate de secundă.
`ms`	Stabilește timpul în milisecunde (de exemplu `3ms`). O secundă înseamnă `1000` de milisecunde.

Valoare implicită: 0s.

Exemplu

Treceți mouse-ul peste bloc - acesta își va schimba lin lățimea în 2 secunde.

html<div id="elem"></div>

css#elem {
  transition-duration: 2s;
  transition-property: width;
  border: 1px solid black;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Vedeți și

proprietatea transition-property,
care stabilește numele proprietății pentru tranziția lină
proprietatea transition-delay,
care stabilește întârzierea înainte de tranziția lină
proprietatea transition-timing-function,
care stabilește funcția de temporizare pentru tranziția lină
proprietatea transition,
care este prescurtarea pentru tranziția lină
proprietatea animation,
cu ajutorul căreia se poate face animație