blob: c18d6fec707aec4b28dbb89be7b7014380361221 (
plain)
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
|
---
title: Web Animations API
slug: Web/API/Web_Animations_API
tags:
- API
- Animation
- Landing
- NeedsTranslation
- Reference
- TopicStub
- Web Animations
translation_of: Web/API/Web_Animations_API
---
<p>{{DefaultAPISidebar("Web Animations")}}</p>
<p>The <strong>Web Animations API</strong> allows for synchronizing and timing changes to the presentation of a Web page, i.e. animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model.</p>
<h2 id="Concepts_and_usage">Concepts and usage</h2>
<p>The Web Animations API provides a common language for browsers and developers to describe animations on DOM elements. To get more information on the concepts behind the API and how to use it, read <a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a>.</p>
<h2 id="Web_Animations_interfaces">Web Animations interfaces</h2>
<dl>
<dt>{{domxref("Animation")}}</dt>
<dd>Provides playback controls and a timeline for an animation node or source. Can take an object created with the {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} constructor.</dd>
<dt>{{domxref("KeyframeEffect")}}</dt>
<dd>Describes sets of animatable properties and values, called <strong>keyframes </strong>and their <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">timing options</a>. These can then be played using the {{domxref("Animation.Animation", "Animation()")}} constructor.</dd>
<dt>{{domxref("AnimationTimeline")}}</dt>
<dd>Represents the timeline of animation. This interface exists to define timeline features (inherited by {{domxref("DocumentTimeline")}} and future timeline objects) and is not itself accessed by developers.</dd>
<dt>{{domxref("AnimationEvent")}}</dt>
<dd>Actually part of CSS Animations.</dd>
<dt>{{domxref("DocumentTimeline")}}</dt>
<dd>Represents animation timelines, including the default document timeline (accessed using the {{domxref("Document.timeline")}} property).</dd>
<dt>{{domxref("EffectTiming")}}</dt>
<dd>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect()")}} all accept an optional dictionary object of timing properties.</dd>
</dl>
<h2 id="Extensions_to_other_interfaces">Extensions to other interfaces</h2>
<p>The Web Animations API adds some new features to {{domxref("document")}} and {{domxref("element")}}.</p>
<h3 id="Extensions_to_the_Document_interface">Extensions to the <code>Document</code> interface</h3>
<dl>
<dt>{{domxref("document.timeline")}}</dt>
<dd>The <code>DocumentTimeline</code> object representing the default document timeline.</dd>
<dt>{{domxref("document.getAnimations()")}}</dt>
<dd>Returns an Array of {{domxref("Animation")}} objects currently in effect on elements in the <code>document</code>.</dd>
<dt>
<h3 id="Extensions_to_the_Element_interface">Extensions to the <code>Element</code> interface</h3>
</dt>
<dt>{{domxref("Element.animate()")}}</dt>
<dd>A shortcut method for creating and playing an animation on an element. It returns the created {{domxref("Animation")}} object instance.</dd>
<dt>{{domxref("Element.getAnimations()")}}</dt>
<dd>Returns an Array of {{domxref("Animation")}} objects currently affecting an element or which are scheduled to do so in future.</dd>
</dl>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Web Animations')}}</td>
<td>{{Spec2('Web Animations')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li>
<li><a href="https://mozdevs.github.io/Animation-examples/">Web Animations demos</a></li>
<li><a href="https://github.com/web-animations/web-animations-js">Polyfill</a></li>
<li>Firefox's current implementation: <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li>
<li>
<p><a href="http://codepen.io/danwilson/pen/xGBKVq">Browser support test</a></p>
</li>
</ul>
|
