forked from mdn/content
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Normalize line endings (mdn#809)
- Run `git add --renormalize .` - Add .gitattributes for missing local settings
- Loading branch information
Showing
11 changed files
with
796 additions
and
795 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| * text=auto eol=lf |
128 changes: 64 additions & 64 deletions
128
files/en-us/web/api/cssanimation/animationname/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,65 @@ | ||
| --- | ||
| title: CSSAnimation | ||
| slug: Web/API/CSSAnimation/animationName | ||
| tags: | ||
| - API | ||
| - Animation | ||
| - CSSAnimation | ||
| - Property | ||
| - Reference | ||
| --- | ||
| <div>{{APIRef("Web Animations API")}}{{SeeCompatTable}}</div> | ||
|
|
||
| <p class="summary">The <strong><code>animationName</code></strong> property of the {{domxref("CSSAnimation")}} interface returns the {{CSSXref("animation-name")}}. This specifies one or more keyframe at-rules which describe the animation applied to the element.</p> | ||
|
|
||
| <h2 id="Syntax">Syntax</h2> | ||
|
|
||
| <pre class="syntaxbox notranslate">const <var>animationName</var> = CSSAnimation.animationName;</pre> | ||
|
|
||
| <h3>Value</h3> | ||
| <p>A {{domxref("CSSOMString")}}.</p> | ||
|
|
||
| <h2 id="Examples">Examples</h2> | ||
|
|
||
| <h3>Returning the animationName</h3> | ||
|
|
||
| <p>The animation in the following example is defined in CSS with the name <code>slide-in</code>. Calling {{domxref("Element.getAnimations()")}} returns an array of all {{domxref("Animation")}} objects. The <code>animationName</code> property returns the name given to the animation, in our case <code>slide-in</code>.</p> | ||
|
|
||
| <pre class="brush: css notranslate">.animate { | ||
| animation: slide-in 0.7s both; | ||
| } | ||
|
|
||
| @keyframes slide-in { | ||
| 0% { | ||
| transform: translateY(-1000px); | ||
| } | ||
| 100% { | ||
| transform: translateY(0); | ||
| } | ||
| }</pre> | ||
|
|
||
| <pre class="brush: js notranslate">let animations = document.querySelector(".animate").getAnimations(); | ||
| console.log(animations[0].animationName);</pre> | ||
|
|
||
| <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('CSS3 Animations 2', '#dom-cssanimation-animationname', 'animationName')}}</td> | ||
| <td>{{Spec2('CSS3 Animations 2')}}</td> | ||
| <td>Initial definition.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <h2 id="Browser_compatibility">Browser compatibility</h2> | ||
|
|
||
| <div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> | ||
|
|
||
| --- | ||
| title: CSSAnimation | ||
| slug: Web/API/CSSAnimation/animationName | ||
| tags: | ||
| - API | ||
| - Animation | ||
| - CSSAnimation | ||
| - Property | ||
| - Reference | ||
| --- | ||
| <div>{{APIRef("Web Animations API")}}{{SeeCompatTable}}</div> | ||
|
|
||
| <p class="summary">The <strong><code>animationName</code></strong> property of the {{domxref("CSSAnimation")}} interface returns the {{CSSXref("animation-name")}}. This specifies one or more keyframe at-rules which describe the animation applied to the element.</p> | ||
|
|
||
| <h2 id="Syntax">Syntax</h2> | ||
|
|
||
| <pre class="syntaxbox notranslate">const <var>animationName</var> = CSSAnimation.animationName;</pre> | ||
|
|
||
| <h3>Value</h3> | ||
| <p>A {{domxref("CSSOMString")}}.</p> | ||
|
|
||
| <h2 id="Examples">Examples</h2> | ||
|
|
||
| <h3>Returning the animationName</h3> | ||
|
|
||
| <p>The animation in the following example is defined in CSS with the name <code>slide-in</code>. Calling {{domxref("Element.getAnimations()")}} returns an array of all {{domxref("Animation")}} objects. The <code>animationName</code> property returns the name given to the animation, in our case <code>slide-in</code>.</p> | ||
|
|
||
| <pre class="brush: css notranslate">.animate { | ||
| animation: slide-in 0.7s both; | ||
| } | ||
|
|
||
| @keyframes slide-in { | ||
| 0% { | ||
| transform: translateY(-1000px); | ||
| } | ||
| 100% { | ||
| transform: translateY(0); | ||
| } | ||
| }</pre> | ||
|
|
||
| <pre class="brush: js notranslate">let animations = document.querySelector(".animate").getAnimations(); | ||
| console.log(animations[0].animationName);</pre> | ||
|
|
||
| <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('CSS3 Animations 2', '#dom-cssanimation-animationname', 'animationName')}}</td> | ||
| <td>{{Spec2('CSS3 Animations 2')}}</td> | ||
| <td>Initial definition.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <h2 id="Browser_compatibility">Browser compatibility</h2> | ||
|
|
||
| <div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> | ||
|
|
||
| <p>{{Compat("api.CSSAnimation.animationName")}}</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,75 @@ | ||
| --- | ||
| title: CSSAnimation | ||
| slug: Web/API/CSSAnimation | ||
| tags: | ||
| - API | ||
| - Animation | ||
| - CSSAnimation | ||
| - Interface | ||
| - Reference | ||
| --- | ||
| <div>{{APIRef("Web Animations API")}}{{SeeCompatTable}}</div> | ||
|
|
||
| <p class="summary">The <strong><code>CSSAnimation</code></strong> interface of the {{domxref('Web Animations API','','',' ')}} represents an {{domxref("Animation")}} object.</p> | ||
|
|
||
| <h2 id="Properties">Properties</h2> | ||
|
|
||
| <p>Inherits methods from its ancestor {{domxref("Animation")}} and adds {{domxref("animationName")}}.</p> | ||
|
|
||
| <dl> | ||
| <dt>{{domxref("CSSAnimation.animationName")}}{{readonlyinline}}</dt> | ||
| <dd>Returns the animation name as a {{domxref("CSSOMString")}}.</dd> | ||
| </dl> | ||
|
|
||
| <h3 id="Event_handlers">Event handlers</h3> | ||
|
|
||
| <p>No specific event handlers; inherits methods from its ancestor {{domxref("Animation")}}.</p> | ||
|
|
||
| <h2 id="Methods">Methods</h2> | ||
|
|
||
| <p>No specific methods; inherits methods from its ancestor {{domxref("Animation")}}.</p> | ||
|
|
||
| <h2 id="Examples">Examples</h2> | ||
|
|
||
| <h3>Inspecting the returned CSSAnimation</h3> | ||
|
|
||
| <p>The animation in the following example is defined in CSS with the name <code>slide-in</code>. Calling {{domxref("Element.getAnimations()")}} returns an array of all {{domxref("Animation")}} objects. In our case this returns a <code>CSSAnimation</code> object, representing the animation created in CSS.</p> | ||
|
|
||
| <pre class="brush: css notranslate">.animate { | ||
| animation: slide-in 0.7s both; | ||
| } | ||
|
|
||
| @keyframes slide-in { | ||
| 0% { | ||
| transform: translateY(-1000px); | ||
| } | ||
| 100% { | ||
| transform: translateY(0); | ||
| } | ||
| }</pre> | ||
|
|
||
| <pre class="brush: js notranslate">let animations = document.querySelector(".animate").getAnimations(); | ||
| console.log(animations[0]);</pre> | ||
|
|
||
| <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('CSS3 Animations 2', '#the-CSSAnimation-interface', 'CSSAnimation')}}</td> | ||
| <td>{{Spec2('CSS3 Animations 2')}}</td> | ||
| <td>Initial definition.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <h2 id="Browser_compatibility">Browser compatibility</h2> | ||
|
|
||
| <div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> | ||
|
|
||
| <p>{{Compat("api.CSSAnimation")}}</p> | ||
| --- | ||
| title: CSSAnimation | ||
| slug: Web/API/CSSAnimation | ||
| tags: | ||
| - API | ||
| - Animation | ||
| - CSSAnimation | ||
| - Interface | ||
| - Reference | ||
| --- | ||
| <div>{{APIRef("Web Animations API")}}{{SeeCompatTable}}</div> | ||
|
|
||
| <p class="summary">The <strong><code>CSSAnimation</code></strong> interface of the {{domxref('Web Animations API','','',' ')}} represents an {{domxref("Animation")}} object.</p> | ||
|
|
||
| <h2 id="Properties">Properties</h2> | ||
|
|
||
| <p>Inherits methods from its ancestor {{domxref("Animation")}} and adds {{domxref("animationName")}}.</p> | ||
|
|
||
| <dl> | ||
| <dt>{{domxref("CSSAnimation.animationName")}}{{readonlyinline}}</dt> | ||
| <dd>Returns the animation name as a {{domxref("CSSOMString")}}.</dd> | ||
| </dl> | ||
|
|
||
| <h3 id="Event_handlers">Event handlers</h3> | ||
|
|
||
| <p>No specific event handlers; inherits methods from its ancestor {{domxref("Animation")}}.</p> | ||
|
|
||
| <h2 id="Methods">Methods</h2> | ||
|
|
||
| <p>No specific methods; inherits methods from its ancestor {{domxref("Animation")}}.</p> | ||
|
|
||
| <h2 id="Examples">Examples</h2> | ||
|
|
||
| <h3>Inspecting the returned CSSAnimation</h3> | ||
|
|
||
| <p>The animation in the following example is defined in CSS with the name <code>slide-in</code>. Calling {{domxref("Element.getAnimations()")}} returns an array of all {{domxref("Animation")}} objects. In our case this returns a <code>CSSAnimation</code> object, representing the animation created in CSS.</p> | ||
|
|
||
| <pre class="brush: css notranslate">.animate { | ||
| animation: slide-in 0.7s both; | ||
| } | ||
|
|
||
| @keyframes slide-in { | ||
| 0% { | ||
| transform: translateY(-1000px); | ||
| } | ||
| 100% { | ||
| transform: translateY(0); | ||
| } | ||
| }</pre> | ||
|
|
||
| <pre class="brush: js notranslate">let animations = document.querySelector(".animate").getAnimations(); | ||
| console.log(animations[0]);</pre> | ||
|
|
||
| <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('CSS3 Animations 2', '#the-CSSAnimation-interface', 'CSSAnimation')}}</td> | ||
| <td>{{Spec2('CSS3 Animations 2')}}</td> | ||
| <td>Initial definition.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <h2 id="Browser_compatibility">Browser compatibility</h2> | ||
|
|
||
| <div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> | ||
|
|
||
| <p>{{Compat("api.CSSAnimation")}}</p> |
Oops, something went wrong.