Savybė transition

Savybė transition yra sutrumpinimas sklandiems perėjimams, leidžia vienu metu nustatyti transition-duration, transition-property, transition-timing-function ir transition-delay.

Sintaksė

cssselektorius {
  transition: reikšmė;
}

Savybių tvarka neturi reikšmės, tačiau vykdymo laikas (transition-duration) turi būti prieš delsą (transition-delay).

Reikšmės

Žr. atitinkamas savybes. Numatytoji reikšmė: all 0s ease 0s.

Reikšmė none atšaukia visus perėjimus (jie vyks akimirksniu).

Pavyzdys

Užveskite pelės žymeklį ant bloko - 3 sekundes nieko neatsitiks (yra 3 s delsos), o tada jis sklandžiai pakeis savo plotį per 2 sekundes. Jei tada pašalinsite pelės žymeklį - vėl 3 sekundes nieko neatsitiks, o tada plotis sklandžiai sumažės iki pradinės reikšmės:

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

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

Результат:

Taip pat žiūrėkite