Właściwość CSS transition-property

Definicja stylu, przeznaczenie i użycie transition-property

Styl transition-property definiuje nazwę właściwości CSS, dla której jest stosowany efekt przejścia (efekt przejścia rozpocznie się, gdy określona właściwość CSS ulegnie zmianie).

Porada: zazwyczaj efekt przejeścia jest widoczny po najechaniu myszą na element.

Uwaga: określaj zawsze właściwość transition-duration, w przeciwnym razie czas trwania wynosi 0, a przejście nie będzie miało żadnego efektu.

Wartości właściwości transition-property

Składnia CSS transition-property

transition-property: none | all | property | initial | inherit;

Wsparcie przeglądarek dla właściwości transition-property

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Liczba przed -webkit-, -moz- i -o- określa pierwszą wersję, która działała z prefiksem.

Właściwość
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

Przykładowe zastosowania właściwości transition-property

Przykład 1. Po najechaniu kursorem na element <div> i zmieni się szerokość z płynnym efektem przejścia: div { transition-property: width; } div:hover { width: 300px; } Przykład 2. Po najechaniu kursorem na element <div> i zmieni się szerokość ORAZ wysokość z płynnym efektem przejścia: div { transition-property: width, height; } div:hover { width: 300px; height: 300px; }