Opóźnienie przejścia - CSS-Tricks

transition-delayWłaściwość zwykle stosowane jako część transitionskrót stosowany jest do określenia długości czasu opóźnienia rozpoczęcia przejścia.

.delay-me ( transition-delay: 0.25s; )

Wartość może być jedną z następujących:

Prawidłowa wartość czasu zdefiniowana w sekundach lub milisekundach, np. 1.3sLub125ms
Lista wartości czasu oddzielonych przecinkami, służąca do definiowania oddzielnych wartości opóźnienia w wielu przejściach dla pojedynczego elementu, np 1s background-color, 350ms transform

Wartość domyślna dla transition-delayto 0s, co oznacza, że nie nastąpi żadne opóźnienie, a przejście rozpocznie się natychmiast. Wartość czasu można wyrazić jako liczbę dziesiętną w celu dokładniejszego określenia czasu.

Kiedy przejście ma wartość opóźnienia, które jest ujemne, spowoduje to natychmiastowe rozpoczęcie przejścia (bez opóźnienia), jednak przejście rozpocznie się w połowie procesu, tak jakby już się rozpoczęło.

Poniższe pióro pokazuje efekt najechania na ramkę, która używa transition-delaywartości 2sz czasem trwania przejścia 1s:

Zobacz
demo opóźnienia przejścia pióra autorstwa CSS-Tricks (@ css-tricks)
na CodePen.

Teraz porównaj to z następującym demo, które ma opóźnienie -1si czas trwania 3s:

Zobacz
demo opóźnienia przejścia Pen Negative autorstwa CSS-Tricks (@ css-tricks)
na CodePen.

Zauważ, że w drugim przykładzie widoczne są tylko ostatnie dwie trzecie rzeczywistego przejścia i nie ma opóźnienia. Ujemna wartość usuwa opóźnienie i skutecznie skraca czas trwania.

Aby zapewnić zgodność we wszystkich obsługiwanych przeglądarkach, wymagane są prefiksy dostawców, ze standardową składnią zadeklarowaną jako ostatnia:

.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

IE10 (pierwsza stabilna wersja IE do obsługi transition-delay) nie wymaga -ms-prefiksu.

Typowym przypadkiem użycia jest stopniowe przejścia:

Zobacz
animacje Pen Staggered autorstwa Chrisa Coyiera (@chriscoyier)
na CodePen.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.