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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
title: animation-name
slug: Web/CSS/animation-name
translation_of: Web/CSS/animation-name
---
<div>{{CSSRef}}</div>
<div><strong><code>Animation-name </code></strong><code>- це</code> властивість <a href="/en-US/docs/CSS" title="CSS">CSS</a>, яка визначає одну або декілька анімацій, які повинні бути застосовані на елементі. Кожне animation-name вказує на {{cssxref("@keyframes")}} правило, яке визначає значення властивостей для анімаційного ряду.</div>
<div> </div>
<pre class="brush:css no-line-numbers">/* Single animation */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;
/* Multiple animations */
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;
/* Global values */
animation-name: <a href="/en-US/docs/Web/CSS/initial">initial</a>
animation-name: <a href="/en-US/docs/Web/CSS/inherit">inherit</a>
animation-name: <a href="/en-US/docs/Web/CSS/unset">unset</a></pre>
<p>Часто, буде зручно користуватися коротким варіантом {{cssxref("animation")}} для встановлення усіх властивостей анімації за один раз.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<h3 id="Values">Values</h3>
<dl>
<dt><code>none</code></dt>
<dd>Значення, яке вказує на відсутність основних кадрів (keyframes). Може бути використано для деактивації анімації без зміни інших параметрів анімації, or to deactivate animations coming from the cascade.</dd>
<dt>{{cssxref("<custom-ident>")}}</dt>
<dd>Ім'я анімації. Цей ідентифікатора складається з комбінаціїThis identifier is composed of a combination of літер <code>a<font face="Open Sans, arial, x-locale-body, sans-serif">-</font></code><code>z (без врахування регістру літер)</code>, цифр <code>0-</code><code>9</code>, підкреслення (<code>_</code>), і/або дефісу (<code>-</code>). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can't be <code>none</code>, <code>unset</code>, <code>initial</code>, or <code>inherit</code>.</dd>
</dl>
<div class="note">
<p><strong>Note</strong>: When you specify multiple comma-separated values on an <code>animation-*</code> property, they will be assigned to the animations specified in the {{cssxref("animation-name")}} property in different ways depending on how many there are. For more information, see <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">Setting multiple animation property values</a>.</p>
</div>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Examples">Examples</h2>
<p>See <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a> for examples.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}</td>
<td>{{Spec2('CSS3 Animations')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
{{CompatChrome(43.0)}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
{{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td>
<td>10 </td>
<td>12 {{property_prefix("-o")}}<br>
12.10</td>
<td>4.0{{property_prefix("-webkit")}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code>- prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
<li>JavaScript {{domxref("AnimationEvent")}} API</li>
</ul>
|
