Atrybut CSS transition

Definicja i użycie

Atrybut przejścia to atrybut skrócony, który służy do ustawienia czterech atrybutów przejścia:

Komentarz:Należy zawsze ustawiać transition-duration Należy zawsze ustawiać, w przeciwnym razie, jeśli czas trwania wynosi 0, efekt przejścia nie zostanie wygenerowany.

Zobacz również:

Tutorial CSS:Przejścia CSS

Podręcznik HTML DOM:Atrybut przejścia

Przykład

Umieść wskaźnik myszy na elemencie div, jego szerokość stopniowo zmieni się z 100px na 300px:

div {
  width: 100px;
  transition: width 2s;
}

Spróbuj sam

Gramatyka CSS

transition: właściwość trwanie funkcja czasu opóźnienie;

Wartość atrybutu

Wartość Opis
transition-property Określa nazwę CSS-a, który ustawia efekt przejścia.
transition-duration Określa, ile sekund lub milisekund potrzeba, aby zakończyć efekt przejścia.
transition-timing-function Określa krzywą prędkości efektu.
transition-delay Definiuje, kiedy zaczyna się efekt przejścia.

Szczegóły techniczne

Domyślna wartość: all 0 ease 0
Inheredność: nie
Wersja: CSS3
Gramatyka JavaScript: object.style.transition="width 2s"

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Liczby z przedrostkami -webkit-, -moz- lub -o- oznaczają pierwszą wersję, w której używany jest przedrostek.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-