Перехід-затримка - CSS-хитрощі

transition-delayВластивість, як правило , використовується в якості частини transitionстенографії, використовується для визначення тривалості часу , щоб затримати початок переходу.

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

Значення може бути одним із наступних:

Дійсне значення часу, визначене в секундах або мілісекундах, наприклад 1.3sабо125ms
Список часових значень, відокремлених комами, для визначення окремих значень затримки на декількох переходах для одного елемента, наприклад 1s background-color, 350ms transform

Значення за замовчуванням transition-delayє 0s, що означає , що ніякої затримки не буде відбуватися , і перехід почне відбуватися негайно. Значення часу може бути виражене як десяткове число для більш точного часу.

Коли перехід має значення затримки, яке є негативним, це призведе до того, що перехід розпочнеться негайно (без затримки), однак перехід розпочнеться частково через процес, як ніби він уже розпочався.

Наступна ручка показує ефект наведення курсора на поле, яке використовує transition-delayзначення 2sз тривалістю переходу 1s:

Див.
Демо-версію затримки переходу пера від CSS-Tricks (@ css-tricks)
на CodePen.

Тепер порівняйте це з наступною демонстрацією, яка має затримку -1sта тривалість 3s:

Дивіться
демонстрацію затримки переходу Pen Negative від CSS-Tricks (@ css-tricks)
на CodePen.

Зверніть увагу, що у другому прикладі видно лише останні дві третини фактичного переходу, і затримки немає. Негативне значення знімає затримку і ефективно зменшує тривалість.

Для сумісності у всіх підтримуваних браузерах потрібні префікси постачальників зі стандартним синтаксисом, оголошеним останнім:

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

IE10 (перша стабільна версія IE для підтримки transition-delay) не вимагає -ms-префікса.

Поширеним випадком використання є перехідний перехід:

Дивіться
анімацію з рухомими ручками Кріса Койєра (@chriscoyier)
на CodePen.

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.