Skip to content

Commit

Permalink
Remove EffectTiming and KeyframeEffectOptions from MDN (#9709)
Browse files Browse the repository at this point in the history
  • Loading branch information
@queengooborg
queengooborg authored Oct 13, 2021
1 parent a34c58a commit b2e158f
Show file tree
Hide file tree
Showing 26 changed files with 86 additions and 1,269 deletions.
82 changes: 46 additions & 36 deletions files/en-us/_redirects.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6721,15 +6721,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 @@ -6756,15 +6756,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 @@ -7277,6 +7277,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 @@ -7864,6 +7873,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 @@ -8822,24 +8832,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
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
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
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

0 comments on commit b2e158f

Please sign in to comment.