Właściwość transition

Właściwość transition - skrót dla płynnych przejść, pozwala jednocześnie ustawić transition-duration, transition-property, transition-timing-function i transition-delay.

Składnia

cssselektor {
  transition: wartość;
}

Kolejność właściwości nie ma znaczenia, jednak czas trwania (transition-duration) musi występować przed opóźnieniem (transition-delay).

Wartości

Zobacz odpowiednie właściwości. Wartość domyślna: all 0s ease 0s.

Wartość none anuluje wszystkie przejścia (będą one odbywać się natychmiast).

Przykład

Najedź myszką na blok - przez 3 sekundy nic się nie będzie działo (ustawiono opóźnienie 3s), a następnie płynnie zmieni on swoją szerokość przez 2 sekundy. Jeśli następnie odsuniesz mysz - to znowu przez 3 sekundy nic się nie będzie działo, a następnie szerokość płynnie zmniejszy się do wartości początkowej:

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

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

Результат:

Zobacz także