| Initial value | 0s |
|---|---|
| Applies to | all elements, ::before and ::after pseudo-elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser compatibility
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
| animation-delay | Chrome
Full support
43 Full support
43
Full support
3 Prefixed Prefixed | Edge Full support 12 | Firefox
Full support
16 Notes Full support 16Notes Notes Before Firefox 57, Firefox does not repaint elements outside the viewport that are animated into the viewport with a delay. This bug affects only some platforms, such as Windows. Full support 49Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 44Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit- Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config. Full support 5Prefixed Prefixed Implemented with the vendor prefix: -moz- | IE Full support 10 | Opera
Full support
30 Full support
30
Full support
15 Prefixed Prefixed Implemented with the vendor prefix: -webkit- No support 12.1 - 15 No support 12 - 15Prefixed Prefixed Implemented with the vendor prefix: -o- | Safari
Full support
9 Full support
9
Full support
4 Prefixed Prefixed Implemented with the vendor prefix: -webkit- | WebView Android
Full support
43 Full support
43
Full support
≤37 Prefixed Prefixed Implemented with the vendor prefix: -webkit- | Chrome Android
Full support
43 Full support
43
Full support
18 Prefixed Prefixed Implemented with the vendor prefix: -webkit- | Firefox Android Full support 16 Full support 16 Full support 49 | |||
CSS-анимация не обязательно должна начинаться мгновенно после ее инициализации. Вы можете управлять ее началом с помощью свойства transition-delay . Чтобы отложить совершение перехода на определенное время, укажите его в значении свойства:
Transition-delay: 1s; /* отложить начало анимации на одну секунду */
Данное свойство мало используется при реализации простой интерактивности на сайте, однако оно может быть весьма полезным, если вам предстоит создавать более сложные эффекты. По аналогии с transition-duration можно записать время задержки для каждого свойства, указанного в transition-property (при этом также важно придерживаться порядка перечисления):
Transition-property: color, background-color, letter-spacing; transition-duration: 1s, .5s, 2s; transition-delay: 0s, 0s, 2s; /* задержка анимации letter-spacing на 2 секунды */
Не забывайте о кроссбраузерности - абсолютно все свойства семейства transition требуют использования вендорных префиксов:
Webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s;
Практическое применение
На практике свойство transition-delay весьма часто применяется при создании выпадающих меню, которые раскрываются при наведении курсора. В данном случае оно записывается не только для начального состояния, но и для конечного.
Возможно, вы замечали, что на некоторых сайтах выпадающие подменю исчезают слишком быстро, при этом сложно поймать нужную ссылку и кликнуть по ней. Предотвратить такое поведение как раз и помогает свойство transition-delay , установленное для обычного элемента и для элемента с псевдоклассом:hover . Значения будут отличаться: для обычного состояния свойство transition-delay должно иметь значение больше нуля, а для состояния наведенного курсора оно должно равняться 0. Пример:
Submenu { opacity: 0; transition-property: all; transition-duration: .5s; transition-delay: 1s; } .menu:hover .submenu { opacity: 1; transition-delay: 0s; }
Данный код приведет к тому, что появление меню при наведении курсора будет происходить без задержки, а исчезновение задержится на одну секунду. Такой трюк однозначно сделает меню более удобным для использования.
Свойство animation-delay устанавливает время ожидания перед запуском цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.
Допустимо указывать несколько значений, перечисляя их через запятую.
Краткая информация
Синтаксис
animation-delay: <время> [,<время>]*
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {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 .
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
Задержка анимации CSS в повторении (5)
Heres маленький фрагмент, который показывает то же самое в 75% случаев, затем он скользит. Эта повторяющаяся схема хорошо эмулирует задержку:
@-webkit-keyframes slide { 0% {background-position: 0 0;} 25% {background-position: 0 0;} 50% {background-position: 0 0;} 75% {background-position: 0 0;} 100% {background-position: 13em 0;} } @-moz-keyframes slide { 0% {background-position: 0 0;} 25% {background-position: 0 0;} 50% {background-position: 0 0;} 75% {background-position: 0 0;} 100% {background-position: 13em 0;} } @keyframes slide { 0% {background-position: 0 0;} 25% {background-position: 0 0;} 50% {background-position: 0 0;} 75% {background-position: 0 0;} 100% {background-position: 13em 0;} }
Недавно я обнаружил, как «правильно» использовать анимации CSS (ранее я отклонил их как неспособные создавать сложные последовательности, как вы могли бы в JavaScript). Итак, теперь я узнаю о них.
Для этого эффекта я стараюсь, чтобы градиентная «вспышка» охватывала элемент, похожий на прогресс. Аналогично влиянию на собственные индикаторы выполнения Windows Vista / 7.
@keyframes barshine { from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);} } .progbar { animation: barshine 1s 4s linear infinite; }
Как вы можете видеть, я пытаюсь получить задержку в 4 секунды, за которой следует блеск, проходящий через 1 секунду, повторяющийся.
Однако кажется, что animation-delay применима только к первой итерации, после чего блеск просто продолжает размахивать.
Я «решил» этот вопрос следующим образом:
@keyframes expbarshine { from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} 80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);} } .progbar { animation: barshine 5s linear infinite; }
from и 80% точно такие же, что приводит к «задержке» 80% длины анимации.
Это работает, но для моей следующей анимации мне нужно, чтобы задержка была переменной (константа для определенного элемента, но переменная среди элементов, использующих анимацию), в то время как сама анимация остается той же длины.
С приведенным выше «решением», я получаю более медленную анимацию, когда все, что я хочу, - это более длительная задержка.
Возможно ли, чтобы animation-delay применялась ко всем итерациям, а не только к первой?
minitech прав в том, что animation-delay указывает задержку до начала анимации и НЕ задержка между итерациями. Редактор проекта спецификации описывает это хорошо, и здесь обсуждалась эта функция, которую вы описываете которая предлагает эту функцию задержки итерации.
Хотя в JS может быть обходной путь, вы можете подделать эту итерационную задержку для вспышки индикатора выполнения, используя только CSS.
Объявляя положение деления факела position:absolute и overflow: hidden родительского div overflow: hidden , устанавливая 100-процентное состояние ключевого кадра больше, чем ширина индикатора выполнения, и играя с функцией времени кубического безье и значениями смещения слева, вы можете для эмуляции режима легкого ease-in-out или linear времени с «задержкой».
Было бы интересно написать меньше / scss mixin, чтобы точно рассчитать функцию смещения влево и времени, чтобы получить это точно, но сейчас у меня нет времени, чтобы играть с ним. Хотелось бы увидеть что-то подобное!
Вот демо, которое я собрал вместе, чтобы показать это. (Я попытался подражать индикатору выполнения Windows 7 и немного упал, но он демонстрирует, о чем я говорю)
/* CSS */ @keyframes progress { from { width: 0px; } to { width: 600px; } } @keyframes barshine { 0% { left: -100px; } 100% { left: 1000px; } } .flare { animation-name: barshine; animation-duration: 3s; animation-direction: normal; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.14, .75, .2, 1.01); animation-iteration-count: infinite; left: 0; top: 0; height: 40px; width: 100px; position: absolute; background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%, rgba(255,255,255,0) 87%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.69)), color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b0ffffff", endColorstr="#00ffffff",GradientType=1); /* IE6-9 fallback on horizontal gradient */ z-index: 10; } .progress { animation-name: progress; animation-duration: 10s; animation-delay: 1s; animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; position:relative; z-index: 1; height: 100%; width: 100%; border-right: 1px solid #0f9116; background: #caf7ce; /* Old browsers */ background: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#caf7ce), color-stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* IE10+ */ background: linear-gradient(to bottom, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#caf7ce", endColorstr="#2ab22a",GradientType=0); /* IE6-9 */ } .progress:after { content: ""; width: 100%; height: 29px; right: 0; bottom: 0; position: absolute; z-index: 3; background: -moz-linear-gradient(left, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00caf7ce", endColorstr="#2ab22a",GradientType=1); /* IE6-9 */ } .bar { margin-top: 30px; height: 40px; width: 600px; position: relative; border: 1px solid #777; border-radius: 3px; }
У меня была аналогичная проблема и я использовал
@-webkit-keyframes pan { 0%, 10% { -webkit-transform: translate3d(0%, 0px, 0px); } 90%, 100% { -webkit-transform: translate3d(-50%, 0px, 0px); } }
Бит раздражает, что вы должны подделывать свою продолжительность, чтобы учесть «задержки» с обоих концов.
Это то, что вы должны делать. Он должен работать так, что у вас есть анимация за 1 секунду, а затем 4-секундная задержка между итерациями:
@keyframes barshine { 0% { background-image:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%); } 20% { background-image:linear-gradient(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%); } } .progbar { animation: barshine 5s 0s linear infinite; }
Поэтому я много общался с этим, и вы можете сделать это, не будучи очень взломанным. Это самый простой способ установить задержку между итерациями анимации: 1. SUPER EASY и 2. просто требует немного логики. Посмотрите эту танцевальную анимацию, которую я сделал:
Dance{ animation-name: dance; -webkit-animation-name: dance; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; } @keyframes dance { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 50% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes dance { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 20% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } 40% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 60% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 80% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 95% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } }
Я на самом деле приехал сюда, пытаясь понять, как задержать анимацию, когда я понял, что вы просто 1. продлеваете продолжительность анимации и набираете пропорцию времени для каждой анимации. Beore Я имел их каждый длительностью 0,5 секунды на общую продолжительность 2,5 секунды. Теперь позвольте сказать, что я хотел добавить задержку, равную общей длительности, поэтому задержка 2,5 секунды.
Время анимации составляет 2,5 секунды, а задержка - 2,5, поэтому вы изменяете продолжительность до 5 секунд. Однако, поскольку вы удвоили общую продолжительность, вам нужно уменьшить вдвое долю анимации. Проверьте последнее ниже. Это отлично сработало для меня.
@-webkit-keyframes dance { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 10% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } 20% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 30% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 50% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } }
Это ваши расчеты, которые вы, вероятно, используете, чтобы выяснить, как изменить продолжительность анимации и% каждой части.
wish_duration = x
wish_duration = animation_part_duration1 + animation_part_duration2 + ... (и так далее)
общая продолжительность = x + y
animation_part_duration1_actual = animation_part_duration1 * wish_duration / total_duration
Я сделал плакат на стене, который перемещается влево и вправо с интервалами. Для меня это работает:
Div-animation { -webkit-animation: bounce 2000ms ease-out; -moz-animation: bounce 2000ms ease-out; -o-animation: bounce 2000ms ease-out; animation: bounce 2000ms ease-out infinite; -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s; transform-origin: 55% 10%; } @-webkit-keyframes bounce { 0% { transform: rotate(0deg); } 3% { transform: rotate(1deg); } 6% { transform: rotate(2deg); } 9% { transform: rotate(3deg); } 12% { transform: rotate(2deg); } 15% { transform: rotate(1deg); } 18% { transform: rotate(0deg); } 21% { transform: rotate(-1deg); } 24% { transform: rotate(-2deg); } 27% { transform: rotate(-3deg); } 30% { transform: rotate(-2deg); } 33% { transform: rotate(-1deg); } 36% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }