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

Remove EffectTiming and KeyframeEffectOptions from MDN #9709

Merged
merged 1 commit into from
Oct 13, 2021
Merged

Remove EffectTiming and KeyframeEffectOptions from MDN #9709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
82 changes: 46 additions & 36 deletions files/en-us/_redirects.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6729,15 +6729,15 @@
/en-US/docs/Web/API/AnimationEffectReadOnly /en-US/docs/Web/API/AnimationEffect
/en-US/docs/Web/API/AnimationEffectReadOnly/getComputedTiming /en-US/docs/Web/API/AnimationEffect/getComputedTiming
/en-US/docs/Web/API/AnimationEffectReadOnly/timing /en-US/docs/Web/API/AnimationEffect/getTiming
/en-US/docs/Web/API/AnimationEffectTimingProperties /en-US/docs/Web/API/EffectTiming
/en-US/docs/Web/API/AnimationEffectTimingProperties/delay /en-US/docs/Web/API/EffectTiming/delay
/en-US/docs/Web/API/AnimationEffectTimingProperties/direction /en-US/docs/Web/API/EffectTiming/direction
/en-US/docs/Web/API/AnimationEffectTimingProperties/duration /en-US/docs/Web/API/EffectTiming/duration
/en-US/docs/Web/API/AnimationEffectTimingProperties/easing /en-US/docs/Web/API/EffectTiming/easing
/en-US/docs/Web/API/AnimationEffectTimingProperties/endDelay /en-US/docs/Web/API/EffectTiming/endDelay
/en-US/docs/Web/API/AnimationEffectTimingProperties/fill /en-US/docs/Web/API/EffectTiming/fill
/en-US/docs/Web/API/AnimationEffectTimingProperties/iterationStart /en-US/docs/Web/API/EffectTiming/iterationStart
/en-US/docs/Web/API/AnimationEffectTimingProperties/iterations /en-US/docs/Web/API/EffectTiming/iterations
/en-US/docs/Web/API/AnimationEffectTimingProperties /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationEffectTimingProperties/delay /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationEffectTimingProperties/direction /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationEffectTimingProperties/duration /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationEffectTimingProperties/easing /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationEffectTimingProperties/endDelay /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationEffectTimingProperties/fill /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationEffectTimingProperties/iterationStart /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationEffectTimingProperties/iterations /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationEvent.AnimationEvent /en-US/docs/Web/API/AnimationEvent/AnimationEvent
/en-US/docs/Web/API/AnimationEvent.animationName /en-US/docs/Web/API/AnimationEvent/animationName
/en-US/docs/Web/API/AnimationEvent.elapsedTime /en-US/docs/Web/API/AnimationEvent/elapsedTime
Expand All @@ -6764,15 +6764,15 @@
/en-US/docs/Web/API/AnimationPlayer/playbackRate /en-US/docs/Web/API/Animation/playbackRate
/en-US/docs/Web/API/AnimationPlayer/reverse /en-US/docs/Web/API/Animation/reverse
/en-US/docs/Web/API/AnimationPlayer/startTime /en-US/docs/Web/API/Animation/startTime
/en-US/docs/Web/API/AnimationTimingEffectProperties /en-US/docs/Web/API/EffectTiming
/en-US/docs/Web/API/AnimationTimingEffectProperties/delay /en-US/docs/Web/API/EffectTiming/delay
/en-US/docs/Web/API/AnimationTimingEffectProperties/direction /en-US/docs/Web/API/EffectTiming/direction
/en-US/docs/Web/API/AnimationTimingEffectProperties/duration /en-US/docs/Web/API/EffectTiming/duration
/en-US/docs/Web/API/AnimationTimingEffectProperties/easing /en-US/docs/Web/API/EffectTiming/easing
/en-US/docs/Web/API/AnimationTimingEffectProperties/endDelay /en-US/docs/Web/API/EffectTiming/endDelay
/en-US/docs/Web/API/AnimationTimingEffectProperties/fill /en-US/docs/Web/API/EffectTiming/fill
/en-US/docs/Web/API/AnimationTimingEffectProperties/iterationStart /en-US/docs/Web/API/EffectTiming/iterationStart
/en-US/docs/Web/API/AnimationTimingEffectProperties/iterations /en-US/docs/Web/API/EffectTiming/iterations
/en-US/docs/Web/API/AnimationTimingEffectProperties /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationTimingEffectProperties/delay /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationTimingEffectProperties/direction /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationTimingEffectProperties/duration /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationTimingEffectProperties/easing /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationTimingEffectProperties/endDelay /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationTimingEffectProperties/fill /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationTimingEffectProperties/iterationStart /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/AnimationTimingEffectProperties/iterations /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Apps.mgmt.addEventListener /en-US/docs/Web/API/EventTarget/addEventListener
/en-US/docs/Web/API/Apps.mgmt.removeEventListener /en-US/docs/Web/API/EventTarget/removeEventListener
/en-US/docs/Web/API/AudioBuffer.copyFromChannel /en-US/docs/Web/API/AudioBuffer/copyFromChannel
Expand Down Expand Up @@ -7285,6 +7285,15 @@
/en-US/docs/Web/API/DynamicsCompressorNode.reduction /en-US/docs/Web/API/DynamicsCompressorNode/reduction
/en-US/docs/Web/API/DynamicsCompressorNode.release /en-US/docs/Web/API/DynamicsCompressorNode/release
/en-US/docs/Web/API/DynamicsCompressorNode.threshold /en-US/docs/Web/API/DynamicsCompressorNode/threshold
/en-US/docs/Web/API/EffectTiming /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/EffectTiming/delay /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/EffectTiming/direction /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/EffectTiming/duration /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/EffectTiming/easing /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/EffectTiming/endDelay /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/EffectTiming/fill /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/EffectTiming/iterationStart /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/EffectTiming/iterations /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Element.attributes /en-US/docs/Web/API/Element/attributes
/en-US/docs/Web/API/Element.childElementCount /en-US/docs/Web/API/Element/childElementCount
/en-US/docs/Web/API/Element.children /en-US/docs/Web/API/Element/children
Expand Down Expand Up @@ -7872,6 +7881,7 @@
/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect.getKeyframes() /en-US/docs/Web/API/KeyframeEffect/getKeyframes
/en-US/docs/Web/API/KeyframeEffect/getFrames /en-US/docs/Web/API/KeyframeEffect/getKeyframes
/en-US/docs/Web/API/KeyframeEffect/setFrames /en-US/docs/Web/API/KeyframeEffect/setKeyframes
/en-US/docs/Web/API/KeyframeEffectOptions /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/KeyframeEffectReadOnly /en-US/docs/Web/API/KeyframeEffect
/en-US/docs/Web/API/KeyframeEffectReadOnly/KeyframeEffectReadOnly /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/KeyframeEffectReadOnly/composite /en-US/docs/Web/API/KeyframeEffect/composite
Expand Down Expand Up @@ -8796,24 +8806,24 @@
/en-US/docs/Web/API/WebSockets_API/WebSockets_reference /en-US/docs/Web/API/WebSockets_API
/en-US/docs/Web/API/WebVR_API/WebVR_concepts /en-US/docs/Web/API/WebVR_API/Concepts
/en-US/docs/Web/API/WebXR_API /en-US/docs/Web/API/WebXR_Device_API
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options /en-US/docs/Web/API/EffectTiming
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/delay /en-US/docs/Web/API/EffectTiming/delay
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/direction /en-US/docs/Web/API/EffectTiming/direction
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/duration /en-US/docs/Web/API/EffectTiming/duration
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/easing /en-US/docs/Web/API/EffectTiming/easing
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/endDelay /en-US/docs/Web/API/EffectTiming/endDelay
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/fill /en-US/docs/Web/API/EffectTiming/fill
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/iterationStart /en-US/docs/Web/API/EffectTiming/iterationStart
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/iterations /en-US/docs/Web/API/EffectTiming/iterations
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties /en-US/docs/Web/API/EffectTiming
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/delay /en-US/docs/Web/API/EffectTiming/delay
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/direction /en-US/docs/Web/API/EffectTiming/direction
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/duration /en-US/docs/Web/API/EffectTiming/duration
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/easing /en-US/docs/Web/API/EffectTiming/easing
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/endDelay /en-US/docs/Web/API/EffectTiming/endDelay
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/fill /en-US/docs/Web/API/EffectTiming/fill
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/iterationStart /en-US/docs/Web/API/EffectTiming/iterationStart
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/iterations /en-US/docs/Web/API/EffectTiming/iterations
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/delay /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/direction /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/duration /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/easing /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/endDelay /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/fill /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/iterationStart /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options/iterations /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/delay /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/direction /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/duration /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/easing /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/endDelay /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/fill /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/iterationStart /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties/iterations /en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext /en-US/docs/Web/API/Web_Audio_API/Migrating_from_webkitAudioContext
/en-US/docs/Web/API/Web_Audio_API/Targeting /en-US/docs/Web/API/WebXR_Device_API/Targeting
/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics /en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics
Expand Down
98 changes: 0 additions & 98 deletions files/en-us/_wikihistory.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40523,98 +40523,6 @@
"chrisdavidmills"
]
},
"Web/API/EffectTiming": {
"modified": "2020-10-15T21:43:00.800Z",
"contributors": [
"sideshowbarker",
"kvoncode",
"fscholz",
"Sheppy",
"rachelnabors",
"chrisdavidmills",
"rolfedh"
]
},
"Web/API/EffectTiming/delay": {
"modified": "2020-10-15T21:47:51.236Z",
"contributors": [
"sideshowbarker",
"fscholz",
"Sheppy",
"rachelnabors",
"chrisdavidmills"
]
},
"Web/API/EffectTiming/direction": {
"modified": "2020-10-15T21:47:51.120Z",
"contributors": [
"claviska",
"fscholz",
"Sheppy",
"chrisdavidmills",
"rachelnabors"
]
},
"Web/API/EffectTiming/duration": {
"modified": "2020-10-15T21:47:51.235Z",
"contributors": [
"fscholz",
"Sheppy",
"rachelnabors",
"chrisdavidmills"
]
},
"Web/API/EffectTiming/easing": {
"modified": "2020-10-15T21:47:51.125Z",
"contributors": [
"estelle",
"birtles",
"duncancumming",
"fscholz",
"chrisdavidmills",
"Sheppy",
"rachelnabors"
]
},
"Web/API/EffectTiming/endDelay": {
"modified": "2020-10-15T21:47:52.431Z",
"contributors": [
"fscholz",
"Sheppy",
"rachelnabors",
"chrisdavidmills"
]
},
"Web/API/EffectTiming/fill": {
"modified": "2020-10-15T21:47:52.151Z",
"contributors": [
"Jack.Works",
"alexey-yunoshev",
"birtles",
"fscholz",
"Sheppy",
"rachelnabors",
"chrisdavidmills"
]
},
"Web/API/EffectTiming/iterationStart": {
"modified": "2020-10-15T21:47:51.277Z",
"contributors": [
"fscholz",
"Sheppy",
"chrisdavidmills",
"rachelnabors"
]
},
"Web/API/EffectTiming/iterations": {
"modified": "2020-10-15T21:47:52.045Z",
"contributors": [
"fscholz",
"Sheppy",
"rachelnabors",
"chrisdavidmills"
]
},
"Web/API/Element": {
"modified": "2020-10-25T20:44:13.988Z",
"contributors": [
Expand Down Expand Up @@ -58116,12 +58024,6 @@
"chrisdavidmills"
]
},
"Web/API/KeyframeEffectOptions": {
"modified": "2020-10-15T22:28:10.095Z",
"contributors": [
"lpd-au"
]
},
"Web/API/LargestContentfulPaint": {
"modified": "2020-10-15T22:29:44.151Z",
"contributors": [
Expand Down
6 changes: 3 additions & 3 deletions files/en-us/tools/page_inspector/how_to/work_with_animations/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ <h3 id="Animation_bars">Animation bars</h3>

<p>If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS <code>@keyframes</code>, there is one bar for each animation, labeled with its name.</p>

<p>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. <a href="/en-US/docs/Web/API/EffectTiming"><code>delay</code> and <code>endDelay</code></a> are both represented.</p>
<p>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. <a href="/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect"><code>delay</code> and <code>endDelay</code></a> are both represented.</p>

<p>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:</p>

Expand Down Expand Up @@ -112,14 +112,14 @@ <h3 id="Application_to_the_example">Application to the example</h3>
<li>animated the <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> properties, to scale the icon and color it</li>
<li>lasted 750ms, had an <code>endDelay</code> of 100ms</li>
<li>used the compositor thread</li>
<li>was given an <code><a href="/en-US/docs/Web/API/EffectTiming/easing">easing</a></code> value of <code>ease-in</code>: you can see this by the concave shape of the green bar.</li>
<li>was given an <code><a href="/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect">easing</a></code> value of <code>ease-in</code>: you can see this by the concave shape of the green bar.</li>
</ul>
</li>
<li>The <code>span#note</code> animation:
<ul>
<li>animated the <code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> properties, to make the name gradually appear</li>
<li>lasted 500ms, and had a <code>delay</code> of 150ms</li>
<li>was given an <code><a href="/en-US/docs/Web/API/EffectTiming/easing">easing</a></code> value of <code>ease-out</code>: you can see this by the convex shape of the green bar.</li>
<li>was given an <code><a href="/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect">easing</a></code> value of <code>ease-out</code>: you can see this by the convex shape of the green bar.</li>
</ul>
</li>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/animation/currenttime/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ A number representing the current time in milliseconds, or `null` to deactivate

## Examples

In the [Drink Me/Eat Me game](http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010), Alice's height is animated so it can go from small to large or large to small. At the start of the game, her height is set between the two extremes by setting her animation's `currentTime` to half her [`KeyframeEffect`'s duration](/en-US/docs/Web/API/EffectTiming):
In the [Drink Me/Eat Me game](http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010), Alice's height is animated so it can go from small to large or large to small. At the start of the game, her height is set between the two extremes by setting her animation's `currentTime` to half her `KeyframeEffect`'s duration:

```js
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
Expand Down
Loading