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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
---
title: AnimationEvent
slug: Web/API/AnimationEvent
tags:
- API
- CSS
- CSS Animations
- Experimental
- Interface
- NeedsTranslation
- Reference
- TopicStub
translation_of: Web/API/AnimationEvent
---
<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p>
<h2 id="摘要">摘要</h2>
<p><strong><code>AnimationEvent</code></strong> 介面表現提供<a href="/zh-TW/docs/Web/Guide/CSS/Using_CSS_animations">動畫</a>相關資訊的事件。</p>
<p>{{InheritanceDiagram}}</p>
<h2 id="性能">性能</h2>
<p><em>另外從其父 {{domxref("Event")}} 繼承屬性</em>。</p>
<dl>
<dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt>
<dd>是一個{{domxref("DOMString")}}包含的值 {{cssxref("animation-name")}} CSS屬性與過渡有關。</dd>
<dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt>
<dd>是一個<code>float</code>給予時間的動畫已經運行，以秒為單位，當該事件燒製，不含動畫被暫停的任何時間量。為一個<code>"animationstart"</code>事件，<code>elapsedTime</code>是<code>0.0</code>，除非有一個負值{{cssxref("animation-delay")}}，在這種情況下，該事件將與燒製<code>elapsedTime</code>含有 <code>(-1 * </code><em>delay</em><code>)</code>。</dd>
<dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt>
<dd>是一個{{domxref("DOMString")}}，從<code>"::"</code>，包含的名字<a href="/zh-TW/docs/Web/CSS/Pseudo-elements">虛擬元素</a>的動畫運行。如果動畫上不偽元素，但該元素，一個空字符串上運行<code>：''。</code></dd>
</dl>
<h2 id="構造函數">構造函數</h2>
<dl>
<dt>{{domxref("AnimationEvent.AnimationEvent","AnimationEvent()")}}</dt>
<dd>創建一個<code>AnimationEvent</code>事件具有給定參數。</dd>
</dl>
<h2 id="方法">方法</h2>
<p><em>同時繼承其父{{domxref("事件")}}方法</em>。</p>
<dl>
<dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
<dd>初始化<code>AnimationEvent</code> 使用過時的創建 {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} 方法。</dd>
</dl>
<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', '#AnimationEvent-interface', 'AnimationEvent') }}</td>
<td>{{ Spec2('CSS3 Animations') }}</td>
<td>初始定義。</td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2>
<p>{{CompatibilityTable()}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>特點</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>基本支持</td>
<td>1.0 {{ property_prefix("webkit") }}</td>
<td>{{CompatGeckoDesktop("6.0")}}</td>
<td>10.0</td>
<td>12 {{property_prefix("O")}}<br>
12.10<br>
15.0 {{ property_prefix("webkit") }}</td>
<td>4.0 {{ property_prefix("webkit") }}</td>
</tr>
<tr>
<td><code>AnimationEvent()</code>構造函數</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop("23.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>initAnimationEvent()</code>{{non-standard_inline}} {{deprecated_inline}}</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("6.0")}}<br>
在{{CompatGeckoDesktop("23.0")}}刪除</td>
<td>10.0</td>
<td>12</td>
<td>4</td>
</tr>
<tr>
<td><code>pseudoelement</code></td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop("23.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>特點</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>基本支持</td>
<td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
<td>{{ CompatGeckoMobile("6.0") }}</td>
<td>10.0</td>
<td>12 {{ property_prefix("o") }}<br>
12.10<br>
15.0 {{ property_prefix("webkit") }}</td>
<td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
<td>{{CompatChrome(43.0)}}</td>
</tr>
<tr>
<td><code>AnimationEvent()</code>構造函數</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("23.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>initAnimationEvent()</code>{{non-standard_inline}} {{deprecated_inline}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("6.0")}}<br>
在{{CompatGeckoMobile("23.0")}}刪除</td>
<td>10.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>pseudoelement</code></td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("23.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="另請參見">另請參見</h2>
<ul>
<li><a href="/zh-TW/docs/CSS/Using_CSS_animations">使用CSS動畫</a></li>
<li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
</ul>
|
