Css задержка: transition-delay | htmlbook.ru

transition-delay | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.0+1.0+26.0+11.6+12.10+3.0+4.0+16.0+2.12.0+

Краткая информация

Значение по умолчанию 0s
НаследуетсяНет
ПрименяетсяКо всем элементам, к псевдоэлементам ::before и ::after
Процентная записьНеприменима
Ссылка на спецификацию http://dev.w3.org/csswg/css-transitions/#transition-delay

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property.

Синтаксис

transition-delay: <время> [,<время>]*

Значения

См. время.

Пример

HTML5CSS3IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-delay</title>
  <style>
   #bar {
    top:-5.5em; right:5em; /* Положение */
     padding: .5em; /* Поля */
     margin: 0; /* Отступы */
     position: absolute; /* Абсолютное позиционирование */
     width: 2em; /* Ширина */
     background: #333; /* Цвет фона */
     color: #fff; /* Цвет текста */
     text-align: center; /* Выравнивание по центру */
     /* Анимация */
     -webkit-transition: .4s ease-out;
     -webkit-transition-delay: 0. 5s;
     -o-transition: .4s ease-out;
     -o-transition-delay: 0.5s;
     -moz-transition: .4s ease-out;
     -moz-transition-delay: 0.5s;
     transition: .4s ease-out;
     transition-delay: 0.5s;
    }
   #bar:hover { top: 0; }
  </style>
 </head>
 <body>
  <ul>
   <li>1</li><li>2</li>
   <li>3</li><li>4</li>
   <li>&darr;</li>
  </ul>
 </body>
</html>

В данном примере при наведении курсора на стрелку, раскрывается блок с числами.

Объектная модель

[window.]document.getElementById(«elementID»).style.transitionDelay

Браузеры

Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition-delay.

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-delay.

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition-delay.

Анимация

CSS по теме

  • transition-delay

Статьи по теме

Рецепты CSS

transition — CSS | MDN

Свойство CSS transition — это сокращённое свойство для transition-property (en-US), transition-duration, transition-timing-function (en-US), и transition-delay (en-US).

Transition позволяет определять переходное состояние между двумя состояниями элемента. Различные состояния могут быть определены с помощью псевдоклассов, таких как :hover или :active или установлены динамически с помощью JavaScript.

/* Применить к 1 свойству */
/* имя свойства | длительность */
transition: margin-left 4s;
/* имя свойства | длительность | задержка */
transition: margin-left 4s 1s;
/* имя свойства | длительность | временная функция | задержка */
transition: margin-left 4s ease-in-out 1s;
/* Применить к 2 свойствам */
transition: margin-left 4s, color 1s;
/* Применить ко всем изменённым свойствам */
transition: all 0.5s ease-out;
/* Глобальные значения */
transition: inherit;
transition: initial;
transition: unset;

Свойство transition указывается как один или более одно-свойственных переходов (single-property transitions), разделённых запятой.

Каждый одно-свойственный transition описывает переход, который должен быть применён к одному свойству (или специальным значениям all и none). Это включает в себя:

  • ноль или одно значение, представляющее свойство, к которому должен быть применён переход. Это может быть одно из:
    • ключевое слово none
    • ключевое слово all
    • <custom-ident> именование свойства CSS.
  • ноль или одно <single-transition-timing-function> (en-US) значение, представляющее временну́ю функцию
  • ноль, одно или два <time> значения. Первое значение, которое может быть интерпретировано как время, присваивается transition-duration, а второе значение, которое может быть интерпретировано как время, присваивается transition-delay (en-US).

Посмотрите, что предпринимается когда у списков значений свойств разные длины. Вкратце, избыточные свойства, не подлежащие анимации, игнорируются.

Формальное описание синтаксиса

transition = 
<single-transition># (en-US)

"><single-transition> =
[ (en-US) none | (en-US) <single-transition-property> ] (en-US) || (en-US)
<time> || (en-US)
<easing-function> || (en-US)
<time>

"><single-transition-property> =
all | (en-US)
<custom-ident>

"><easing-function> =
linear | (en-US)
<linear-easing-function> | (en-US)
<cubic-bezier-easing-function> | (en-US)
<step-easing-function>

"><linear-easing-function> =
linear( <linear-stop-list> )

"><cubic-bezier-easing-function> =

ease | (en-US)
ease-in | (en-US)
ease-out | (en-US)
ease-in-out | (en-US)
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

"><step-easing-function> =
step-start | (en-US)
step-end | (en-US)
steps( <integer> [ (en-US), <step-position> ] (en-US)? (en-US) )

"><linear-stop-list> =
[ (en-US) <linear-stop> ] (en-US)# (en-US)

"><step-position> =

jump-start | (en-US)
jump-end | (en-US)
jump-none | (en-US)
jump-both | (en-US)
start | (en-US)
end

"><linear-stop> =
<number> && (en-US)
<linear-stop-length>? (en-US)

"><linear-stop-length> =
<percentage>{1,2} (en-US)

Примеры CSS переходов включены в главную статью о CSS переходах.

Specification
CSS Transitions
# transition-shorthand-property

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

[2] PPK test

  • Использование CSS переходов
  • TransitionEvent (en-US)

Last modified: , by MDN contributors

CSS transition-delay Свойство

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Подождите 2 секунды до начала эффекта перехода:

div {
задержка перехода: 2 с;
}

Попробуйте сами »


Определение и использование

Свойство transition-delay указывает, когда начнется эффект перехода.

Значение transition-delay определяется в секундах (с) или миллисекундах (мс).

Значение по умолчанию: 0 с
Унаследовано: нет
Анимация: нет. Читать о анимированном
Версия: CSS3
Синтаксис JavaScript: объект .style.transitionDelay=»2s» Попытайся


Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Числа, за которыми следует -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.

Собственность
задержка перехода 26.0
4.0 -вебкит-
10,0 16,0
4,0 -моз-
6.
1
3.1 -вебкит-
12,1
10,5 -о-


Синтаксис CSS

задержка перехода: время |начальный|наследовать;

Значения свойств

Значение Описание
время Указывает количество секунд или миллисекунд ожидания перед началом эффекта перехода
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать


Связанные страницы

Учебник по CSS: CSS-переходы

Ссылка на HTML DOM: свойство transitionDelay

❮ Предыдущая Полное руководство по CSS Следующий ❯


НАБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


5 Top7 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

задержка перехода | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство transition-delay , обычно используемое как часть сокращения transition , используется для определения времени задержки начала перехода.

 .delay-me {
  задержка перехода: 0,25 с;
} 

Значение может быть одним из следующих:

  • Допустимое значение времени в секундах или миллисекундах, например. 1,3 с или 125 мс
  • Список значений времени, разделенных запятыми, для определения отдельных значений задержки для нескольких переходов для одного элемента, например. 1 с цвет фона, 350 мс преобразование

Значение по умолчанию для transition-delay равно 0s , что означает, что задержки не будет и переход начнется немедленно. Значение времени может быть выражено в виде десятичного числа для более точного определения времени.

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

Следующее перо показывает эффект наведения на поле, которое использует значение transition-delay 2 с с длительностью перехода 1 с :

См. демонстрацию Pen
Transition delay от CSS-Tricks (@css-tricks)
на CodePen.

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

См. демонстрацию задержки отрицательного перехода Pen
от CSS-Tricks (@css-tricks)
на CodePen.

Обратите внимание, что во втором примере видны только последние две трети фактического перехода и задержки нет. Отрицательное значение устраняет задержку и эффективно сокращает продолжительность.

Для совместимости со всеми поддерживаемыми браузерами требуются префиксы поставщиков со стандартным синтаксисом, объявленным последним:

 .пример {
  -webkit-transition-delay: 500 мс;
  -moz-transition-delay: 500 мс;
  -o-transition-delay: 500 мс;
  задержка перехода: 500 мс;
} 

IE10 (первая стабильная версия IE с поддержкой transition-delay ) не требует префикса -ms-.

Обычный вариант использования — стационарные переходы:

См. Pen
Staggered Animations от Chris Coyier (@chriscoyier)
на CodePen.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *