Właściwość Style transition

Definicja i użycie

transition Właściwość jest skróconą formą czterech właściwości przejścia:

Komentarz:Zawsze określaj Właściwość transitionDurationw przeciwnym razie czas trwania wynosi 0, a przejście będzie niewłaściwe.

Zobacz również:

CSS Reference Manual:Właściwość transition

Przykład

Umieść kursor myszy nad elementem div, aby stopniowo zmieniać jego wygląd:

document.getElementById("myDIV").style.transition = "all 2s";

Spróbuj sam!

Gramatyka

Zwróć właściwość transition:

object.style.transition

Ustawienie właściwości transition:

object.style.transition = "property duration timing-function delay|initial|inherit"

Wartość właściwości

Wartość Opis
transitionProperty Określa nazwę CSS-a, na którą wpływa efekt przejścia.
transitionDuration Określa, ile sekund lub milisekund zajmuje ukończenie efektu przejścia.
transitionTimingFunction Określa krzywą prędkości efektu przejścia.
transitionDelay Definiuje, kiedy zaczyna się efekt przejścia.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz initial.
inherit Inherbuje tę właściwość od elementu nadrzędnego. Zobacz inherit.

Szczegóły techniczne

Domyślna wartość: all 0 ease 0
Wartość zwracana: ciąg znaków, który oznacza Właściwość transition.
Wersja CSS: CSS3

Obsługa przeglądarek

Numer w tabeli podaje wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1