Animation delay css: animation-delay | CSS | WebReference
animation-delay | CSS | WebReference
Свойство animation-delay устанавливает время ожидания перед запуском цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.
Допустимо указывать несколько значений, перечисляя их через запятую.
Краткая информация
| Значение по умолчанию | 0s |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after |
| Анимируется | Нет |
Синтаксис
animation-delay: <время> [,<время>]*Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>animation-duration</title> <style> .warn { background: #fc0; padding: 10px; top: -100px; position: absolute; left: 0; right: 0; } .fadeInTop { animation-name: fadeInTop; animation-duration: 2s; /* Продолжительность анимации */ animation-delay: 1s; /* Задержка */ animation-fill-mode: forwards; } @keyframes fadeInTop { from { top: -100px; } to { top: 0; } } </style> </head> <body> <div>Вы не учли, что скалярное поле необходимо и достаточно!</div> </body> </html>
Объектная модель
Объект.style.animationDelay
Примечание
Chrome, Safari и Android поддерживают свойство -webkit-animation-delay.
Opera до версии 12.10 поддерживает свойство -o-animation-delay.
Firefox до версии 16 поддерживает свойство -moz-animation-delay.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
animation-delay — Веб-технологии для разработчиков
Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
CSS свойство animation-delay определяет время задежки перед стартом анимации.
Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.
При указании отрицательного значения, анимация также начнется непременно, но ее воспроизведение начнется не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.
Синтаксис
animation-delay: 3s; animation-delay: 2s, 4ms;
Значения
<time>- Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в милисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.
Формальный синтаксис
<time>#
Примеры
Посмотрите CSS анимации для примера.
Спецификации
Совместимость с браузерами
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | (Да)-webkit 43.0 | 5.0 (5.0)-moz | 10 | 12-o 12.10 | 4.0-webkit |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|
| Basic support | (Да)-webkit | 5.0 (5.0)-moz 16.0 (16.0) | ? | 12-o | (Да)-webkit | ? |
Смотрите также
Свойство animation-delay | CSS справочник
basicweb.ru- HTML
- Учебник HTML
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Коды языков
- Мнемоники
- Цвета
- Тесты знаний
- CSS
- Учебник CSS
- Справочник свойств
- Селекторы
- Функции
- Правила
- Flexbox генератор
- Grid генератор
- Учебник LESS
- JavaScript
- Интерфейсы веб API
- Объект Array
- Объект Date
- Объект Function
- Объект Global
- Объект JSON
- Объект Math
- Объект Number
- Объект Object
- Объект RegExp
- Объект Promise
- Объект String
- jQuery
- Селекторы
- События
- Методы DOM
- Перемещения
- Эффекты
- AJAX
- Объект Callbacks
- Объект Deferred
HTML
- HTML учебник
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Мнемоники
- Коды языков
- HTML цвета
- Тесты знаний
CSS
- CSS учебник
- Справочник свойств
- CSS селекторы
- CSS функции
- CSS правила
- Flexbox генератор
- Grid генератор
- LESS учебник
JavaScript
- Интерфейсы веб API
- Объект Array
- Объект Date
- Объект Function
- Объект Global
- Объект JSON
- Объект Number
- Объект Object
- Объект Promise
- Объект RegExp
- Объект String
jQuery
- jQuery селекторы
- jQuery события
- jQuery методы DOM
- jQuery перемещения
- jQuery утилиты
- jQuery эффекты
- jQuery AJAX
- jQuery объект Callbacks
- jQuery объект Deferred
CSS свойства
- align-content
- align-items
- align-self
- all
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-shadow
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- @font-face
- font-family
- font-size
- font-style
- font-variant
- font-weight
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-start
- grid-row-gap
- grid-row-end
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- justify-content
- justify-items
- justify-self
- height
- @keyframes
- left
- letter-spacing
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- @media
- min-height
- min-width
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-wrap
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- place-content
- place-items
- place-self
- position
- quotes
- resize
- right
- tab-size
- table-layout
- text-align
- text-align-last
animation-timing-function — Веб-технологии для разработчиков
CSS свойство animation-timing-function задаёт как происходит анимация в течении длительности каждого цикла.
The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Достаточно удобно использовать сокращённое свойство animation для того, чтобы установить все свойства для анимации одновременно.
Синтаксис
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;Временные функции могут быть установлены в пользовательских keyframes’ах в правилах @keyframes. Если в keyframe’е значение animation-timing-function указано, соответствующее значение animation-timing-function от элемента к которому анимация применена используется для этого keyframe’а.
Значения
<timingfunction>- Каждый
<timing-function>представляет функцию расчета времени для связи с соответствующим свойством animate, как определено вanimation-property.
Формальный синтаксис
<timing-function>#где
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>где
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/ru/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/ru/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)где
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
Примеры
См. CSS animations.
Спецификации
Совместимость с браузерами
Update compatibility data on GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
animation-timing-function | Chrome Полная поддержка 43
| Edge Полная поддержка 12
| Firefox Полная поддержка 16
| IE Полная поддержка 10 | Opera Полная поддержка 30
| Safari Полная поддержка 9
| WebView Android Полная поддержка 43
| Chrome Android Полная поддержка 43
| Firefox Android Полная поддержка 16
| Opera Android Полная поддержка 30
| Safari iOS Полная поддержка 9
| Samsung Internet Android Полная поддержка 4.0
|
jump- keywords for steps() | Chrome Полная поддержка 77 | Edge Полная поддержка 79 | Firefox Полная поддержка 65 | IE Нет поддержки Нет | Opera Полная поддержка 64 | Safari Полная поддержка 14 | WebView Android Полная поддержка 77 | Chrome Android Полная поддержка 77 | Firefox Android Полная поддержка 65 | Opera Android Полная поддержка 55 | Safari iOS Полная поддержка 14 | Samsung Internet Android Полная поддержка 12.0 |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
- Пользователь должен сам включить эту возможность.
- Пользователь должен сам включить эту возможность.
- Требует вендорный префикс или другое имя для использования.
- Требует вендорный префикс или другое имя для использования.
Смотрите также
анимация задержки | CSS | WebReference
Свойство animation-delay устанавливает время ожидания перед запуском цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отриц значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.
Допустимо указывать несколько значений, перечисляя их через запятую.
Краткая информация
| Значение по умолчанию | 0s |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, к псевдоэлементам :: до и :: после |
| Анимируется | Нет |
Синтаксис
animation-delay: <время> [, <время>] * Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | нормальный | малые шапки |
| A || B | Каждое Мессианство самостоятельно или с другими в произвольном порядке. | ширина || count |
| [] | Группирует значения. | [урожай || крест] |
| * | Повторять ноль или больше раз. | [, <время>] * |
| + | Повторять один или больше раз. | <число> + |
| ? | Указанный тип, слово или группа не является обязательным. | вставка? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус> {1,4} |
| # | Повторять один или больше раз через запятую. | <время> # |
Пример
Объектная модель
Объект .style.animationDelay
Примечание
Chrome, Safari и Android свойство -webkit-animation-delay.
Opera до версии 12.10 поддерживает свойство -o-animation-delay.
Firefox до версии 16 поддерживает свойство -moz-animation-delay.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Рекомендация (Рекомендация) — спецификация W3C и одобана как стандарт.
- Кандидат в рекомендации (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Предлагаемая рекомендация (Предлагаемая рекомендация) — на этом этапе представлен на рассмотрении Консультативного совета W3C для окончательного утверждения.
- Рабочий проект (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Черновик редакции (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Проект (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров используются следующие обозначения.
- — свойство полностью предоставленным браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство имеется лишь частично, например, не все допустимые значения имеют свойство не ко всем элементам, которые указаны в спецификации.
Число указывает версию, начиная с свойства, имеющего свойство.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
.animation-delay — Веб-технологии для разработчиков
Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Следуйте за изменениями в следующих версиях браузеров, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров.
Описание
CSS свойство animation-delay Определить время задежки перед стартом анимации.
Значение 0 с, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.
При указании отрицательного значения, анимация также начнется непременно, но ее проигрывается с первого ключевого кадра, а так, будто часть анимации уже была первым. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.
Синтаксис
анимация-задержка: 3 с; задержка анимации: 2 с, 4 мс;
Значения
-
<время> - Время задержки перед стартом анимации. Может быть определено в секундах, либо в милисекундах (мс). Если вы не указаны единицу измерения, свойство будет недействительным.
Формальный синтаксис
<время> #
Примеры
Посмотрите CSS анимации для примера.
Спецификации
Совместимость с браузерами
| Элемент | Хром | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Базовая поддержка | (Да) -webkit 43.0 | 5,0 (5,0) -моз 16,0 (16,0) | 10 | 12-о 12,10 | 4.0-веб-набор |
| Элемент | Android | Firefox Mobile (Gecko) | IE Телефон | Opera Mobile | Safari Mobile | Chrome для Android |
|---|---|---|---|---|---|---|
| Базовая поддержка | (Да) -webkit | 5,0 (5,0) -моз 16.0 (16,0) | ? | 12-о | (Да) -webkit | ? |
Смотрите также
.Свойство animation-delay | Справочник CSS
basicweb.ru- HTML
- Учебник HTML
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Коды языков
- Мнемоники
- Цвета
- Тесты знаний
- CSS
- Учебник CSS
- Справочник свойств
- Селекторы
- Обязательства
- Правила
- Flexbox генератор
- Сетевой генератор
- Учебник МЕНЬШЕ
- JavaScript
- Интерфейсы веб API
- Объект Массив
- Дата размещения
- Объект Функция
- Объект Global
- Объект JSON
- Объект Math
- Номер объекта
- Объект Объект
- Объект RegExp
- Обещание объекта
- Строка объекта
- jQuery
- Селекторы
- События
- Методы ДОМ
- Перераз
- Утилиты
- Эффекты
- AJAX
- Объект Обратные звонки
- Объект отложен
HTML
- HTML учебник
анимация — Веб-технологии для разработчиков
Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского
CSS свойство animation это короткая запись для animation-name , animation-duration , animation-time-function , animation-delay , animation-iteration-count , animation-direction , animation-fill-mode и animation-play-state .
Описание того, какие свойства являются анимируемыми доступными; стоит отметить, что это описание также подходит для CSS переходов.
Синтаксис
/ * длительность @keyframes | временная функция | задержка | счетчик итераций | направление | режим заполнения | игровое состояние | имя */ анимация: 3 с. замедление 1 с. 2 перевернуть оба приостановленных слайда; / * длительность @keyframes | временная функция | задержка | имя */ анимация: 3 с линейный слайд 1 с; / * длительность @keyframes | имя */ анимация: слайд 3 с;
Порядок важен в определении анимации: первое значение, которое может быть проанализировано как присваивается animation-duration , и второй назначен animation-delay .
Обратите внимание, что порядок также важен в каждом определении анимации для различения значений animation-name от других ключевых слов. При синтаксическом анализе ключевые слова, действительные для свойств, отличных от имя-анимации , значения которых не были найдены ранее в сокращении, должны приниматься для этих свойств, а не для имя-анимации . Кроме того, при сериализации значения по умолчанию других свойств должны выводиться, по крайней мере, в тех случаях, когда необходимо различать имя-анимации , которое может быть значением другого свойства и может выводиться в дополнительных случаях.
Формальный синтаксис
<одиночная анимация> #.где
<одиночная анимация> = <время> || <функция синхронизации> || <время> || <количество одиночных анимаций> || <направление одиночной анимации> |||| || [нет | <имя-кадра>] где
<функция-синхронизация> = линейный || <функция синхронизации шага>
<количество итераций одиночной анимации> = бесконечно | <число>
<направление одной анимации> = нормальный | обратный | альтернативный | альтернативный-обратный
= none | нападающие | назад | оба
= running | приостановлено
= | где
= easy | легкость в | легкость выхода | легкость установки | cubic-bezier ( [0,1]> ,
