From 8fbdeb7fdee69284a6423044f24b8b4a7140028f Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 11 May 2026 12:00:10 +0200 Subject: [PATCH 1/6] Refine animation property documentation (#43983) * Refine animation property documentation Updated text for clarity and consistency, including corrections to capitalization and phrasing. Adjusted examples and explanations for better readability. - set the examples to match MDN writing guidelines - sentence case headings - removed comments from code examples and put them in paragraphs. - removed the second example, as that was about keyframe animations, not the animation shorthand property. * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Fix typos and formatting * Update index.md * spaces. odd * Apply suggestions from code review Co-authored-by: Chris Mills * sunrise * hue-rotate link Updated reference to 'hue-rotate()' filter function with a link. * Clarify comment for animation shorthand support * Add in colon --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Chris Mills --- .../reference/properties/animation/index.md | 175 +++++++++--------- 1 file changed, 85 insertions(+), 90 deletions(-) diff --git a/files/en-us/web/css/reference/properties/animation/index.md b/files/en-us/web/css/reference/properties/animation/index.md index f45fa3379f37a41..72bfa6c2a9ff939 100644 --- a/files/en-us/web/css/reference/properties/animation/index.md +++ b/files/en-us/web/css/reference/properties/animation/index.md @@ -124,17 +124,15 @@ When no `animation-duration` value is specified in the `animation` shorthand pro ### animation-timeline -The current implementations of `animation` are reset-only: if no `` is included in the `animation` shorthand, the shorthand declaration will reset any previously-declared `animation-timeline` values to `auto`. +If no `` is included in the `animation` shorthand, the shorthand declaration will reset any previously-declared `animation-timeline` values to `auto`, which sets the timeline to the default {{domxref("documentTimeline")}}. -By default, the `animation-timeline` is the {{domxref("documentTimeline")}}. If a value is included, but the user-agent doesn't support `` values within the shorthand, the declaration is invalid and ignored. +If an `` value is included, but the user-agent doesn't support `` values within the shorthand, the entire `animation` declaration is invalid and ignored. For this reason, when creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you need to declare the `animation-timeline` property after declaring any `animation` shorthand for it to take effect. -This means that, when creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you need to declare the `animation-timeline` property after declaring any `animation` shorthand for it to take effect. - -Alternatively, the `animation-timeline` can be used within the `animation` shorthand within a CSS {{cssxref("@supports")}} block, such as: +Alternatively, the `` can be set within the `animation` shorthand within a CSS {{cssxref("@supports")}} block, such as: ```css @supports (animation: view()) { - /* CSS for browsers that support setting within the animation shorthand */ + /* CSS for browsers supporting within `animation` shorthand */ } ``` @@ -144,15 +142,15 @@ In the case of the `animation-fill-mode` [forwards](/en-US/docs/Web/CSS/Referenc ## Accessibility -Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity. +Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for vestibular disorders, epilepsy, and migraine and scotopic sensitivity. -Consider providing a mechanism for pausing or disabling animation as well as using the [Reduced Motion Media Query](/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) to create a complimentary experience for users who have expressed a preference for reduced animated experiences. +Consider providing a mechanism for pausing or disabling animation as well as using the [reduced motion `@media` query](/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) to create a complimentary experience for users who have expressed a preference for reduced animated experiences. -- [Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/) -- [An Introduction to the Reduced Motion Media Query | CSS-Tricks](https://css-tricks.com/introduction-reduced-motion-media-query/) -- [Responsive Design for Motion | WebKit](https://webkit.org/blog/7551/responsive-design-for-motion/) -- [MDN Understanding WCAG, Guideline 2.2 explanations](/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Operable#guideline_2.2_%e2%80%94_enough_time_provide_users_enough_time_to_read_and_use_content) -- [Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html) +- [Designing Safer Web Animation For Motion Sensitivity](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/) via A List Apart (2015) +- [An Introduction to the Reduced Motion Media Query](https://css-tricks.com/introduction-reduced-motion-media-query/) via CSS-Tricks (2017) +- [Responsive Design for Motion](https://webkit.org/blog/7551/responsive-design-for-motion/) via WebKit (2017) +- [Understanding WCAG, Guideline 2.2 — Enough Time: Provide users enough time to read and use content](/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Operable#guideline_2.2_%e2%80%94_enough_time_provide_users_enough_time_to_read_and_use_content) +- [Understanding WCAG Success Criterion 2.2.2: Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide) via W3C (2026) ## Formal definition @@ -165,55 +163,25 @@ Consider providing a mechanism for pausing or disabling animation as well as usi ## Examples > [!NOTE] -> Animating [CSS Box Model](/en-US/docs/Web/CSS/Guides/Box_model) properties is discouraged. Animating any box model property is inherently CPU intensive; consider animating the [transform](/en-US/docs/Web/CSS/Reference/Properties/transform) property instead. +> Animating [CSS box model](/en-US/docs/Web/CSS/Guides/Box_model) properties is discouraged as it leads to layout reflow and repaints. Animating any box model property is inherently CPU-intensive; consider animating the [transform](/en-US/docs/Web/CSS/Reference/Properties/transform) property instead. -### Sun Rise +### Basic usage: a sunrise -Here we animate a yellow sun across a light blue sky. The sun rises +In this example, we demonstrate basic usage of the `animate` shorthand by animating a yellow sun across a light blue sky. The sun rises to the center of the viewport and then falls out of sight. -```html -
-``` - -```css -:root { - overflow: hidden; /* hides any part of the sun below the horizon */ - background-color: lightblue; - display: flex; - justify-content: center; /* centers the sun in the background */ -} - -.sun { - background-color: yellow; - border-radius: 50%; /* creates a circular background */ - height: 100vh; /* makes the sun the size of the viewport */ - aspect-ratio: 1 / 1; - animation: 4s linear 0s infinite alternate sun-rise; -} - -@keyframes sun-rise { - from { - /* pushes the sun down past the viewport */ - transform: translateY(110vh); - } - to { - /* returns the sun to its default position */ - transform: translateY(0); - } -} -``` - -{{EmbedLiveSample('Sun_Rise')}} +#### HTML -### Animating Multiple Properties - -Adding onto the sun animation in the previous example, we add a second animation changing the color of the sun as it rises and sets. The sun starts off dark red when it is below the horizon and changes to a bright orange as it reaches the top. +We include a single {{htmlelement("div")}} element to represent our sun. ```html
``` +#### CSS + +We start by creating the sun and the sky. The sky is the {{cssxref(":root")}} of the HTML document. We hide any content that is outside the viewport, which in our case will be any part of the sun below the horizon, by setting the {{cssxref("overflow")}} to hidden. We also use the {{cssxref("justify-content")}} property to center the sun in the background. We make the sun yellow, declare its {{cssxref("height")}} to be the height of the viewport (`100vh`), and set its width to equal its height by setting the {{cssxref("aspect-ratio")}} to `1`. We turn the square `
` into a circle using the {{cssxref("border-radius")}} property. + ```css :root { overflow: hidden; @@ -226,38 +194,45 @@ Adding onto the sun animation in the previous example, we add a second animation background-color: yellow; border-radius: 50%; height: 100vh; - aspect-ratio: 1 / 1; - animation: 4s linear 0s infinite alternate animating-multiple-properties; + aspect-ratio: 1; + animation: 4s linear 0s infinite alternate sunrise; } +``` -/* it is possible to animate multiple properties in a single animation */ -@keyframes animating-multiple-properties { +Next, we define some animation {{cssxref("@keyframes")}} that will push the element on which they are applied down past the viewport and then return the element to its default position using [CSS transforms](/en-US/docs/Web/CSS/Guides/Transforms): + +```css +@keyframes sunrise { from { transform: translateY(110vh); - background-color: red; - filter: brightness(75%); } to { transform: translateY(0); - background-color: orange; - /* unset properties i.e. 'filter' will revert to default values */ } } ``` -{{EmbedLiveSample('Animating Multiple Properties')}} +The last step is to apply the animation! We use the `animation` shorthand property to apply the `sunrise` keyframe animation to the `.sun` `
`. The animation is set to play for infinite iterations, with each one lasting 4 seconds; the animation direction alternates with each iteration: -### Applying Multiple Animations +```css +.sun { + animation: 4s linear 0s infinite alternate sunrise; +} +``` -Here is a sun that rises and falls on a lightblue background. The sun -gradually rotates through a rainbow of colors. The timing of the sun's -position and color are independent. +#### Results -```html +{{EmbedLiveSample('Basic usage: a sunrise')}} + +### Applying multiple animations + +This example demonstrates applying multiple animations to a single element. Expanding on the previous example, with a sun that rises and falls on a light blue background, here we will gradually rotate the sun through a rainbow of colors. The timing of the sun's position and color are independent. + +```html hidden
``` -```css +```css hidden :root { overflow: hidden; background-color: lightblue; @@ -270,13 +245,9 @@ position and color are independent. border-radius: 50%; height: 100vh; aspect-ratio: 1 / 1; - /* multiple animations are separated by commas, each animation's parameters are set independently */ - animation: - 4s linear 0s infinite alternate rise, - 24s linear 0s infinite psychedelic; } -@keyframes rise { +@keyframes sunrise { from { transform: translateY(110vh); } @@ -284,7 +255,11 @@ position and color are independent. transform: translateY(0); } } +``` + +We include the same HTML and CSS as in the previous example, and add a second set of animation `@keyframes` to apply a {{cssxref("filter")}} that rotates the hue through all possible values using the [`hue-rotate()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/hue-rotate) filter function: +```css @keyframes psychedelic { from { filter: hue-rotate(0deg); @@ -295,20 +270,29 @@ position and color are independent. } ``` -{{EmbedLiveSample('Applying Multiple Animations')}} +We then apply the two animations to our sun. Multiple animations are separated by commas, and each animation's parameters are set independently: -### Cascading Multiple Animations +```css +.sun { + animation: + 4s linear 0s infinite alternate sunrise, + 24s linear 0s infinite psychedelic; +} +``` -Here is a yellow sun on a lightblue background. The sun bounces between the -left and right sides of the viewport. The sun remains in the viewport even -though a rise animation is defined. The rise animation's transform property -is 'overwritten' by the bounce animation. +#### Results -```html +{{EmbedLiveSample('Applying multiple animations')}} + +### Cascading multiple animations + +This example demonstrates what happens when multiple animations define values for the same property. This example expands upon the [basic usage](#basic_usage_a_sunrise) example, with two animations applied that both set a {{cssxref("transform")}} value. + +```html hidden
``` -```css +```css hidden :root { overflow: hidden; background-color: lightblue; @@ -321,17 +305,13 @@ is 'overwritten' by the bounce animation. border-radius: 50%; height: 100vh; aspect-ratio: 1 / 1; - /* - animations declared later in the cascade will override the - properties of previously declared animations - */ - /* bounce 'overwrites' the transform set by rise, hence the sun only moves horizontally */ - animation: - 4s linear 0s infinite alternate rise, - 4s linear 0s infinite alternate bounce; } +``` + +We use the same HTML and CSS as in the first example, including the original `sunrise` animation, and a second animation named `bounce`. The two animations declare values for the same property: -@keyframes rise { +```css +@keyframes sunrise { from { transform: translateY(110vh); } @@ -350,9 +330,24 @@ is 'overwritten' by the bounce animation. } ``` +We apply both animations to the sun. When two animations apply different values to the same property, animations declared later in the cascade override previously-declared animations. In this case, the `transform` value on the `bounce` animation "wins" the [cascade](/en-US/docs/Web/CSS/Guides/Cascade/Introduction#css_animations_and_the_cascade), and overrides the transform set by `sunrise`, so the sun will only move horizontally. + +```css +.sun { + animation: + 4s linear 0s infinite alternate sunrise, + 4s linear 0s infinite alternate bounce; +} +``` + +#### Results + {{EmbedLiveSample('Cascading Multiple Animations')}} -See [Using CSS animations](/en-US/docs/Web/CSS/Guides/Animations/Using#examples) for additional examples. +The sun bounces between the +left- and right-hand sides of the viewport. The sun remains in the viewport even +though the `sunrise` animation is defined. The `sunrise` animation's transform property +is overridden by the bounce animation. ## Specifications From f993d9f6d574bd8b519014c6ad46bc66f28fae7e Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Mon, 11 May 2026 21:09:27 +1000 Subject: [PATCH 2/6] FF151 CanvasRenderingContext2D.lang - minor tidy (#44071) FF151 CanvasRenderingContext2D.lang - fix confusing wording --- files/en-us/web/api/canvasrenderingcontext2d/lang/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/canvasrenderingcontext2d/lang/index.md b/files/en-us/web/api/canvasrenderingcontext2d/lang/index.md index e801e8cddf18fd7..21fc3e20eb18932 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/lang/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/lang/index.md @@ -35,8 +35,9 @@ When the `inherit` value is used, the language of the canvas context is inherite Due to technical limitations, the `inherit` value behaves differently for on-screen and off-screen canvases: -- For on-screen canvases, the `lang` value is inherited when the associated `CanvasRenderingContext2D` object is first created; the inherited `lang` value then changes dynamically if the `lang` attribute value is updated. -- For off-screen canvases, the `lang` value is inherited when the associated `OffscreenCanvasRenderingContext2D` object is first created, and then fixed for the lifetime of the {{domxref("OffscreenCanvas")}}. It **does not** change if the `lang` attribute value is updated. Because of this, the language of an off-screen canvas can only be changed by setting the `lang` value explicitly. +- For on-screen canvases, the `lang` value of the context is inherited when the associated `CanvasRenderingContext2D` object is first created, and is updated dynamically if the `lang` attribute of the associated canvas is updated (either directly or by inheritance). +- For off-screen canvases, the `lang` value is inherited when the associated `OffscreenCanvasRenderingContext2D` object is first created "as a snapshot"; subsequent updates to the `lang` attribute from which the offscreen context inherited its value do not change its `lang` attribute. + For this reason, the language of an off-screen canvas can only be changed by setting its `lang` value explicitly. ## Examples From 48eae85d0acc6904cb7e8127a84067c5f16f8574 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 11 May 2026 14:46:16 +0200 Subject: [PATCH 3/6] Bump fast-uri from 3.0.6 to 3.1.2 (#44054) Bumps [fast-uri](https://github.com/fastify/fast-uri) from 3.0.6 to 3.1.2. - [Release notes](https://github.com/fastify/fast-uri/releases) - [Commits](https://github.com/fastify/fast-uri/compare/v3.0.6...v3.1.2) --- updated-dependencies: - dependency-name: fast-uri dependency-version: 3.1.2 dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6a9ee25ce9b4b5a..ec0b6b006e4e0e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4217,9 +4217,9 @@ "license": "MIT" }, "node_modules/fast-uri": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz", - "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.2.tgz", + "integrity": "sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==", "dev": true, "funding": [ { From 6686b4c94c8cf3eb188d0e549634cd581f0b8237 Mon Sep 17 00:00:00 2001 From: Claas Augner <495429+caugner@users.noreply.github.com> Date: Mon, 11 May 2026 15:46:27 +0200 Subject: [PATCH 4/6] Remove `{{DOMxRef("External"}}` (#44074) The page no longer exists. --- files/en-us/web/api/html_dom_api/index.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/files/en-us/web/api/html_dom_api/index.md b/files/en-us/web/api/html_dom_api/index.md index 59a3b5d7e0f17b0..b6e8e397bcf585e 100644 --- a/files/en-us/web/api/html_dom_api/index.md +++ b/files/en-us/web/api/html_dom_api/index.md @@ -165,10 +165,6 @@ These interfaces offer access to the browser window and document that contain th - {{DOMxRef("Navigator")}} - {{DOMxRef("Window")}} -#### Deprecated web app and browser integration interfaces - -- {{DOMxRef("External")}} {{deprecated_inline}} - #### Obsolete web app and browser integration interfaces - {{DOMxRef("Plugin")}} {{deprecated_inline}} From d85bb94bd88736df60c9847ea5c815f6166f3bf5 Mon Sep 17 00:00:00 2001 From: Claas Augner <495429+caugner@users.noreply.github.com> Date: Mon, 11 May 2026 15:54:00 +0200 Subject: [PATCH 5/6] Replace `{{domxref("Promise")}}` with `{{jsxref("Promise")}}` (#44073) --- files/en-us/web/api/speechrecognition/available_static/index.md | 2 +- files/en-us/web/api/speechrecognition/install_static/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/speechrecognition/available_static/index.md b/files/en-us/web/api/speechrecognition/available_static/index.md index bf94797b6cf8db1..eba608e102c0204 100644 --- a/files/en-us/web/api/speechrecognition/available_static/index.md +++ b/files/en-us/web/api/speechrecognition/available_static/index.md @@ -35,7 +35,7 @@ available(options) ### Return value -A {{domxref("Promise")}} that resolves with an enumerated value indicating the availability of the specified languages for speech recognition. +A {{jsxref("Promise")}} that resolves with an enumerated value indicating the availability of the specified languages for speech recognition. Possible values include: diff --git a/files/en-us/web/api/speechrecognition/install_static/index.md b/files/en-us/web/api/speechrecognition/install_static/index.md index db9ee950619fcf4..80ec613d82aedf6 100644 --- a/files/en-us/web/api/speechrecognition/install_static/index.md +++ b/files/en-us/web/api/speechrecognition/install_static/index.md @@ -31,7 +31,7 @@ install(options) ### Return value -A {{domxref("Promise")}} that resolves with a boolean value indicating whether the language pack was installed successfully. The conditions that result in each return value are as follows: +A {{jsxref("Promise")}} that resolves with a boolean value indicating whether the language pack was installed successfully. The conditions that result in each return value are as follows: - `true` - : All installation attempts succeeded for the requested languages, or the languages were already installed. From 98dd40c398afc0c8498a9fb1c57e0e27c6134bf3 Mon Sep 17 00:00:00 2001 From: ArnaudBienner Date: Mon, 11 May 2026 15:54:55 +0200 Subject: [PATCH 6/6] IndexedDB: clarify binary key type (#44072) * IndexedDB: clarify binary key type The previous wording ("binary blob") sounded like blobs (https://developer.mozilla.org/en-US/docs/Web/API/Blob) could be used a keys, but this is not the case: https://w3c.github.io/IndexedDB/#key-construct And since they can be used as values however (as mentioned later in the page), this creates some confusion IMO * Update files/en-us/web/api/indexeddb_api/basic_terminology/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Apply suggestion from @chrisdavidmills Co-authored-by: Chris Mills * Small grammar fix * small markup fix --------- Co-authored-by: Chris Mills Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/api/indexeddb_api/basic_terminology/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/indexeddb_api/basic_terminology/index.md b/files/en-us/web/api/indexeddb_api/basic_terminology/index.md index 52155290122d122..5ad7c43606026c6 100644 --- a/files/en-us/web/api/indexeddb_api/basic_terminology/index.md +++ b/files/en-us/web/api/indexeddb_api/basic_terminology/index.md @@ -132,7 +132,7 @@ A key that is stored as part of the stored value. It is found using a _key path_ A data value by which stored values are organized and retrieved in the object store. The object store can derive the key from one of three sources: a _[key generator](#key_generator)_, a _[key path](#key_path)_, or an explicitly specified value. The key must be of a data type that has a number that is greater than the one before it. Each record in an object store must have a key that is unique within the same store, so you cannot have multiple records with the same key in a given object store. -A key can be one of the following types: [string](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [date](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), float, a binary blob, and [array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). For arrays, the key can range from an empty value to infinity. And you can include an array within an array. +A key can be one of the following types: [string](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [date](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), float, binary data (represented by an [`ArrayBuffer`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) or a [`TypedArray`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) view such as a [`Uint8Array`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array)), and [array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). The length of an array key can range from `0` (an empty array) to infinity, and you can include an array within an array. Alternatively, you can also look up records in an object store using the _[index](#index)._