1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
---
title: animation-delay
slug: Web/CSS/animation-delay
tags:
- CSS
- CSS-анимации
- CSS-свойства
translation_of: Web/CSS/animation-delay
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<h2 id="Описание">Описание</h2>
<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <strong><code>animation-delay</code></strong> определяет время задержки перед стартом анимации.</p>
<p>{{EmbedInteractiveExample("pages/css/animation-delay.html")}}</p>
<p>Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.</p>
<p>При указании отрицательного значения, анимация также начнётся непременно, но её воспроизведение начнётся не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.</p>
<p>{{cssinfo}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: css">animation-delay: 3s;
animation-delay: 2s, 4ms;
</pre>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code><time></code></dt>
<dd>Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в миллисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{csssyntax}}
<h2 id="Примеры">Примеры</h2>
<p>Посмотрите <a href="/en-US/docs/CSS/CSS_animations" title="CSS/CSS_animations">CSS-анимации</a> для примера.</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}</td>
<td>{{Spec2('CSS3 Animations')}}</td>
<td>Начальное определение</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Совместимость с браузерами</h2>
<p>{{Compat("css.properties.animation-delay")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS-анимаций</a></li>
<li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
</ul>
|
