Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pagemacro: include rather than transclude EffectTiming properties #7644

Merged
merged 2 commits into from
Sep 1, 2021
Merged

Pagemacro: include rather than transclude EffectTiming properties #7644

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
656988a
Pagemacro: include rather than transclude EffectTiming properties
hamishwillee Aug 6, 2021
f89fa2a
Merge branch 'main' into pagemacro_animation
sideshowbarker Sep 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions files/en-us/web/api/effecttiming/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@
---
<div>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</div>

<p>The <strong><code>EffectTiming</code></strong> dictionary, part of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>, is used by {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} to describe timing properties for animation effects. These properties are all optional, although without setting a <code>duration</code> the animation will not play.</p>
<p>The <strong><code>EffectTiming</code></strong> dictionary, part of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>, is used by {{domxref("Element.animate()")}},
{{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}},
and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} to describe timing properties for animation effects. These properties are all optional, although without setting a <code>duration</code> the animation will not play.</p>

<p>In other words, these properties describe how the {{Glossary("user agent")}} should go about making the transition from keyframe to keyframe, and how to behave when the animation begins and ends.</p>

Expand Down Expand Up @@ -57,5 +59,5 @@ <h2 id="See_also">See also</h2>
<li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li>
<li>{{domxref("Element.animate()")}}</li>
<li>{{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}</li>
<li>{{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}</li>
<li>{{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}</li>
</ul>
39 changes: 26 additions & 13 deletions files/en-us/web/api/element/animate/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,14 @@
element, then plays the animation. It returns the created {{domxref("Animation")}}
object instance.</p>

<div class="note">
<p>Elements can have multiple animations applied to them. You can get a list of the
animations that affect an element by calling {{domxref("Element.getAnimations()")}}.
</p>
<div class="notecard note">
<p><strong>Note:</strong> Elements can have multiple animations applied to them. You can get a list of the
animations that affect an element by calling {{domxref("Element.getAnimations()")}}. </p>
</div>

<h2 id="Syntax">Syntax</h2>

<pre
class="brush: js">var <em>animation</em> = element.animate(<em>keyframes</em>, <em>options</em>); </pre>
<pre class="brush: js">animate(keyframes, options)</pre>

<h3 id="Parameters">Parameters</h3>

Expand All @@ -35,13 +33,10 @@ <h3 id="Parameters">Parameters</h3>
<dd>
<p>Either an array of keyframe objects, <strong>or</strong> a keyframe object whose
properties are arrays of values to iterate over. See <a
href="/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe
Formats </a>for more details.</p>
href="/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats </a>for more details.</p>
</dd>
<dt><code>options</code></dt>
<dd>Either an <strong>integer representing the animation's duration</strong> (in
milliseconds), <strong>or</strong> an Object containing one or more timing
properties: </dd>
<dd>Either an <strong>integer representing the animation's duration</strong> (in milliseconds), <strong>or</strong> an Object containing one or more timing properties: </dd>
<dd>
<dl>
<dt><code>id {{optional_inline}}</code></dt>
Expand All @@ -50,8 +45,26 @@ <h3 id="Parameters">Parameters</h3>
title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a>
with which to reference the animation.</dd>
</dl>
{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties",
"Properties")}}

<dl>
<dt>{{domxref("EffectTiming.delay", "delay")}} {{optional_inline}}</dt>
<dd>The number of milliseconds to delay the start of the animation. Defaults to 0.</dd>
<dt>{{domxref("EffectTiming.direction", "direction")}} {{optional_inline}}</dt>
<dd>Whether the animation runs forwards (<code>normal</code>), backwards (<code>reverse</code>), switches direction after each iteration (<code>alternate</code>), or runs backwards and switches direction after each iteration (<code>alternate-reverse</code>). Defaults to <code>"normal"</code>.</dd>
<dt>{{domxref("EffectTiming.duration", "duration")}} {{optional_inline}}</dt>
<dd>The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.</dd>
<dt>{{domxref("EffectTiming.easing", "easing")}} {{optional_inline}}</dt>
<dd>The rate of the animation's change over time. Accepts the pre-defined values <code>"linear"</code>, <code>"ease"</code>, <code>"ease-in"</code>, <code>"ease-out"</code>, and <code>"ease-in-out"</code>, or a custom <code>"cubic-bezier"</code> value like <code>"cubic-bezier(0.42, 0, 0.58, 1)"</code>. Defaults to <code>"linear"</code>.</dd>
<dt>{{domxref("EffectTiming.endDelay", "endDelay")}} {{optional_inline}}</dt>
<dd>The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0. </dd>
<dt>{{domxref("EffectTiming.fill", "fill")}} {{optional_inline}}</dt>
<dd>Dictates whether the animation's effects should be reflected by the element(s) prior to playing (<code>"backwards"</code>), retained after the animation has completed playing (<code>"forwards"</code>), or <code>both</code>. Defaults to <code>"none"</code>.</dd>
<dt>{{domxref("EffectTiming.iterationStart", "iterationStart")}} {{optional_inline}}</dt>
<dd>Describes at what point in the iteration the animation should start. 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration. Defaults to 0.0.</dd>
<dt>{{domxref("EffectTiming.iterations", "iterations")}} {{optional_inline}}</dt>
<dd>The number of times the animation should repeat. Defaults to <code>1</code>, and can also take a value of {{jsxref("Infinity")}} to make it repeat for as long as the element exists.</dd>
</dl>

</dd>
</dl>

Expand Down
24 changes: 22 additions & 2 deletions files/en-us/web/api/keyframeeffect/keyframeeffect/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,28 @@ <h3 id="Parameters">Parameters</h3>
<dd>An <a href="/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">keyframe object</a> or <code>null</code>.</dd>
<dt>keyframeOptions {{optional_inline}}</dt>
<dd>
<p>Either an integer representing the animation's duration (in milliseconds), or an {{domxref("EffectTiming", "Object")}} containing one or more of the following:<br>
{{Page("/en-US/docs/Web/API/EffectTiming", "Properties")}}</p>
<p>Either an integer representing the animation's duration (in milliseconds), or an {{domxref("EffectTiming", "Object")}} containing one or more of the following:</p>

<dl>
<dt>{{domxref("EffectTiming.delay", "delay")}} {{optional_inline}}</dt>
<dd>The number of milliseconds to delay the start of the animation. Defaults to 0.</dd>
<dt>{{domxref("EffectTiming.direction", "direction")}} {{optional_inline}}</dt>
<dd>Whether the animation runs forwards (<code>normal</code>), backwards (<code>reverse</code>), switches direction after each iteration (<code>alternate</code>), or runs backwards and switches direction after each iteration (<code>alternate-reverse</code>). Defaults to <code>"normal"</code>.</dd>
<dt>{{domxref("EffectTiming.duration", "duration")}} {{optional_inline}}</dt>
<dd>The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.</dd>
<dt>{{domxref("EffectTiming.easing", "easing")}} {{optional_inline}}</dt>
<dd>The rate of the animation's change over time. Accepts the pre-defined values <code>"linear"</code>, <code>"ease"</code>, <code>"ease-in"</code>, <code>"ease-out"</code>, and <code>"ease-in-out"</code>, or a custom <code>"cubic-bezier"</code> value like <code>"cubic-bezier(0.42, 0, 0.58, 1)"</code>. Defaults to <code>"linear"</code>.</dd>
<dt>{{domxref("EffectTiming.endDelay", "endDelay")}} {{optional_inline}}</dt>
<dd>The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0. </dd>
<dt>{{domxref("EffectTiming.fill", "fill")}} {{optional_inline}}</dt>
<dd>Dictates whether the animation's effects should be reflected by the element(s) prior to playing (<code>"backwards"</code>), retained after the animation has completed playing (<code>"forwards"</code>), or <code>both</code>. Defaults to <code>"none"</code>.</dd>
<dt>{{domxref("EffectTiming.iterationStart", "iterationStart")}} {{optional_inline}}</dt>
<dd>Describes at what point in the iteration the animation should start. 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration. Defaults to 0.0.</dd>
<dt>{{domxref("EffectTiming.iterations", "iterations")}} {{optional_inline}}</dt>
<dd>The number of times the animation should repeat. Defaults to <code>1</code>, and can also take a value of {{jsxref("Infinity")}} to make it repeat for as long as the element exists.</dd>
</dl>



<dl>
<dt>{{domxref("KeyframeEffect/composite", "composite")}}</dt>
Expand Down
21 changes: 4 additions & 17 deletions files/en-us/web/api/web_animations_api/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@ <h2 id="Web_Animations_interfaces">Web Animations interfaces</h2>
<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>
<dd>Describes sets of animatable properties and values, called <strong>keyframes</strong> and their <a href="/en-US/docs/Web/API/EffectTiming">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>
<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>
Expand All @@ -57,20 +57,7 @@ <h3 id="Extensions_to_the_Element_interface">Extensions to the <code>Element</co

<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>
{{Specifications("api.Animation")}}

<h2 id="See_also">See also</h2>

Expand All @@ -80,6 +67,6 @@ <h2 id="See_also">See also</h2>
<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>
<p><a href="https://codepen.io/danwilson/pen/xGBKVq">Browser support test</a></p>
</li>
</ul>