diff --git a/files/en-us/web/api/csskeyframerule/keytext/index.md b/files/en-us/web/api/csskeyframerule/keytext/index.md index e0993607a708a7f..e85ad9aa1d7bd92 100644 --- a/files/en-us/web/api/csskeyframerule/keytext/index.md +++ b/files/en-us/web/api/csskeyframerule/keytext/index.md @@ -8,7 +8,7 @@ browser-compat: api.CSSKeyframeRule.keyText {{APIRef("CSSOM") }} -The **`keyText`** property of the {{domxref("CSSKeyframeRule")}} interface represents the keyframe selector as a comma-separated list of percentage values. The from and to keywords map to 0% and 100%, respectively. +The **`keyText`** property of the {{domxref("CSSKeyframeRule")}} interface represents the [keyframe selector](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors) as a comma-separated list of percentage values. The from and to keywords map to 0% and 100%, respectively. ## Value diff --git a/files/en-us/web/api/csskeyframesrule/deleterule/index.md b/files/en-us/web/api/csskeyframesrule/deleterule/index.md index e4f4520a37050ef..693909907f9e59a 100644 --- a/files/en-us/web/api/csskeyframesrule/deleterule/index.md +++ b/files/en-us/web/api/csskeyframesrule/deleterule/index.md @@ -19,7 +19,7 @@ deleteRule(select) ### Parameters - `select` - - : A string which contains the keyframe selector of the rule to be deleted, which must be: + - : A string which contains the [keyframe selector](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors) of the rule to be deleted, which must be: - a comma-separated list of percentage values between 0% and 100%; - or, the keywords `from` or `to` diff --git a/files/en-us/web/api/csskeyframesrule/findrule/index.md b/files/en-us/web/api/csskeyframesrule/findrule/index.md index 5c3bc17b62bd249..5a66e5c06e3304d 100644 --- a/files/en-us/web/api/csskeyframesrule/findrule/index.md +++ b/files/en-us/web/api/csskeyframesrule/findrule/index.md @@ -19,7 +19,7 @@ findRule(select) ### Parameters - `select` - - : A string which contains the keyframe selector of the rule to be found, which must be: + - : A string which contains the [keyframe selector](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors) of the rule to be found, which must be: - a comma-separated list of percentage values between 0% and 100%; - or, the keywords `from` or `to` diff --git a/files/en-us/web/css/guides/animations/index.md b/files/en-us/web/css/guides/animations/index.md index b36b99e62feb5d8..bb746c51bb3e8b2 100644 --- a/files/en-us/web/css/guides/animations/index.md +++ b/files/en-us/web/css/guides/animations/index.md @@ -250,6 +250,7 @@ The CSS animations module level 2 also introduces the `animation-trigger`, `anim ### At-rules and descriptors - {{cssxref("@keyframes")}} +- [``](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors) ### Events diff --git a/files/en-us/web/css/guides/scroll-driven_animations/index.md b/files/en-us/web/css/guides/scroll-driven_animations/index.md index aef8f330dff69f8..8a5128a40f4ae11 100644 --- a/files/en-us/web/css/guides/scroll-driven_animations/index.md +++ b/files/en-us/web/css/guides/scroll-driven_animations/index.md @@ -11,7 +11,7 @@ The **CSS scroll-driven animations** module provides functionality that builds o ## Scroll-driven animations in action -You can define the scroller that controls the animation either by naming the animation or with the {{cssxref("scroll")}} function. +You can define the scroller that controls the animation either by naming the animation or with the {{cssxref("animation-timeline/scroll", "scroll()")}} function. ```html hidden live-sample___scroll_animation
@@ -146,7 +146,8 @@ Scroll the element in the inline direction to see its background color change. S - [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) module - {{cssxref("animation-timeline")}} - - {{cssxref("@keyframes")}} + - {{cssxref("@keyframes")}} at-rule + - [``](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors) - [CSS overflow](/en-US/docs/Web/CSS/Guides/Overflow) module - {{glossary("Scroll container")}} - [Scrollport](/en-US/docs/Glossary/Scroll_container#scrollport) diff --git a/files/en-us/web/css/guides/scroll-driven_animations/timelines/index.md b/files/en-us/web/css/guides/scroll-driven_animations/timelines/index.md index 7c447b75f5df5dd..f50e90cfd9b985e 100644 --- a/files/en-us/web/css/guides/scroll-driven_animations/timelines/index.md +++ b/files/en-us/web/css/guides/scroll-driven_animations/timelines/index.md @@ -320,7 +320,7 @@ The {{cssxref("view-timeline-inset")}} arguments specify insets (if positive) or Unlike the scroll timeline's `scroll()` function, there is no `` argument in the `view()` function, as the view timeline always tracks the subject within its nearest ancestor scroll container. -In this example, as we are using inset values, we can use the `from` and `to` keyframe selectors. +In this example, as we are using inset values, we can use the `from` and `to` [keyframe selectors](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors). ```css live-sample___anon_view_args @keyframes action { diff --git a/files/en-us/web/css/guides/selectors/index.md b/files/en-us/web/css/guides/selectors/index.md index 3386f18fec30210..2918a6a1aa11426 100644 --- a/files/en-us/web/css/guides/selectors/index.md +++ b/files/en-us/web/css/guides/selectors/index.md @@ -189,6 +189,9 @@ The CSS selectors module also introduces the {{CSSXref(":blank")}}, {{CSSXref(": - Other [pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) - {{CSSxRef("::cue")}} +- [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) + - [``](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors) + - {{CSSXref("@namespace")}} at-rule - {{cssxref("important", "!important")}} diff --git a/files/en-us/web/css/guides/syntax/error_handling/index.md b/files/en-us/web/css/guides/syntax/error_handling/index.md index e3b6466039af884..349f557166ff355 100644 --- a/files/en-us/web/css/guides/syntax/error_handling/index.md +++ b/files/en-us/web/css/guides/syntax/error_handling/index.md @@ -37,7 +37,7 @@ After parsing each declaration, style rule, at-rule, and so on, the browser chec ### At-rule errors -The `@` symbol, known in CSS specifications as an ``, indicates the beginning of a CSS {{cssxref("at-rule")}}. Once an at-rule begins with the `@` symbol, nothing is considered invalid from the parser's standpoint. Everything up to the first semi-colon (`;`) or the opening curly brace (`{`) is part of the at-rule's prelude. The content of each at-rule is interpreted according to the grammar rules for that particular at-rule. +The `@` symbol, known in CSS specifications as an ``, indicates the beginning of a CSS [at-rule](/en-US/docs/Web/CSS/Reference/At-rules). Once an at-rule begins with the `@` symbol, nothing is considered invalid from the parser's standpoint. Everything up to the first semi-colon (`;`) or the opening curly brace (`{`) is part of the at-rule's prelude. The content of each at-rule is interpreted according to the grammar rules for that particular at-rule. Statement at-rules, such as {{cssxref("@import")}} and {{cssxref("@namespace")}} declarations, contain just a prelude. The semicolon ends the at-rule immediately for [statement at-rules](/en-US/docs/Web/CSS/Guides/Syntax/At-rules#statement_at-rules). If the contents of the prelude are invalid according to the grammar for that at-rule, the at-rule is ignored, with the browser continuing to parse CSS after it encounters the next semi-colon. For example, if an `@import` at-rule occurs after any CSS declaration other than `@charset`, `@layer` or other `@import` statements, the `@import` declaration is ignored. @@ -52,7 +52,7 @@ Different at-rules have different grammar rules, different (or no) descriptors, For example, the `@font-face` rule requires both a [`font-family`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face/font-family) and [`src`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face/src) descriptor. If either of these is omitted or invalid, the entire `@font-face` rule is invalid. Including an unrelated descriptor, any other valid font descriptor with an invalid value, or a property style declaration within the `@font-face` nested block will not invalidate the font declaration. As long as the font name and font source are included and valid, any invalid CSS within the at-rule is ignored, but the `@font-face` block is still parsed. -While the grammar of the `@keyframes` at-rule is very different from the `@font-face` rule grammar, the type of error still impacts what gets ignored. Important declarations (marked with the {{cssxref("important")}} flag) and properties that can't be animated are ignored in keyframe rules, but they don't impact other styles declared in the same keyframe selector block. Including an invalid keyframe selector (such as a percentage value less than `0%` or greater than `100%`, or a {{cssxref("number")}} omitting the `%`) invalidates the keyframe selector list and therefore the style block is ignored. An invalid keyframe selector only invalidates the invalid selector's style block; it does not invalidate the entire `@keyframes` declaration. Including styles between two keyframe selector blocks, on the other hand, will invalidate the entire `@keyframes` at-rule. +While the grammar of the `@keyframes` at-rule is very different from the `@font-face` rule grammar, the type of error still impacts what gets ignored. Important declarations (marked with the {{cssxref("important")}} flag) and properties that can't be animated are ignored in keyframe rules, but they don't impact other styles declared in the same [keyframe selector](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors) block. Including an invalid keyframe selector (such as a percentage value less than `0%` or greater than `100%`, or a {{cssxref("number")}} omitting the `%`) invalidates the keyframe selector list and therefore the style block is ignored. An invalid keyframe selector only invalidates the invalid selector's style block; it does not invalidate the entire `@keyframes` declaration. Including styles between two keyframe selector blocks, on the other hand, will invalidate the entire `@keyframes` at-rule. Some at-rules are almost always valid. The {{cssxref("@layer")}} at-rule comes in both regular and nested forms. The `@layer` statement syntax contains just the prelude, ending with a semi-colon. Alternatively, the nested syntax has layer styles nested between curly braces coming after the prelude. Omitting a closing curly brace may be a logic error but is not a syntax error. In the case of a missing closing brace in `@layer`, any styles coming after where the closing brace should have been are parsed as being in the cascade layer defined in the at-rule's prelude. The CSS is valid as there are no syntax errors; nothing is discarded. A syntax error may cause the named or anonymous layer to be empty, but the layer is still created. @@ -60,7 +60,7 @@ Some at-rules are almost always valid. The {{cssxref("@layer")}} at-rule comes i There are many ways you might make a mistake writing a selector, but only invalid selectors cause a selector list to be invalid (See [invalid selector list](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list#invalid_selector_list)). -If you include a {{cssxref("class_selectors", "class")}}, {{cssxref("id_selectors", "id")}}, or {{cssxref("type_selectors", "type")}} selector for a class, id, or element (or custom element) that doesn't exist, it may be a logic error but it's not a syntax error. However, if you have a typo in a pseudo-class or a pseudo-element, it might create an invalid selector, which is an error the parser needs to address. +If you include a [class selector](/en-US/docs/Web/CSS/Reference/Selectors/Class_selectors), an [id_selectors](/en-US/docs/Web/CSS/Reference/Selectors/ID_selectors), or a [type selector](/en-US/docs/Web/CSS/Reference/Selectors/Type_selectors) for a class, id, or element (or custom element) that doesn't exist, it may be a logic error but it's not a syntax error. However, if you have a typo in a pseudo-class or a pseudo-element, it might create an invalid selector, which is an error the parser needs to address. If a selector list contains any invalid selectors, then the entire style block is ignored. There are exceptions: if the invalid selector is within an {{cssxref(":is")}} or {{cssxref(":where")}} pseudo-class (which accept [forgiving selector lists](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list#forgiving_selector_list)) or if the unknown selector is a [`-webkit-` prefixed pseudo-element](#-webkit-_exception), only the unknown selector is ignored as not matching anything. The selector list is not invalidated. diff --git a/files/en-us/web/css/reference/at-rules/@keyframes/index.md b/files/en-us/web/css/reference/at-rules/@keyframes/index.md index 31246eadc66ace8..130efac0e9cc728 100644 --- a/files/en-us/web/css/reference/at-rules/@keyframes/index.md +++ b/files/en-us/web/css/reference/at-rules/@keyframes/index.md @@ -37,7 +37,7 @@ The **`@keyframes`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/Gu ## Description -To use keyframes, create a `@keyframes` rule with a name that is then used by the {{ cssxref("animation-name") }} property to match an animation to its keyframe declaration. Each `@keyframes` rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe. +To use keyframes, create a `@keyframes` rule with a name that is then used by the {{ cssxref("animation-name") }} property to match an animation to its keyframe declaration. Each `@keyframes` rule contains a style list of [keyframe selectors](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors), which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe. You can list the keyframe percentages in any order; they will be handled in the order they should occur. diff --git a/files/en-us/web/css/reference/properties/animation-range/index.md b/files/en-us/web/css/reference/properties/animation-range/index.md index 6b025b060169108..c16128f727f490f 100644 --- a/files/en-us/web/css/reference/properties/animation-range/index.md +++ b/files/en-us/web/css/reference/properties/animation-range/index.md @@ -252,7 +252,7 @@ Scroll to see the element being animated. {{EmbedLiveSample("Examples", "100%", "480px")}} -Note how the `from`, or `0%`, keyframe property values are not applied to the animated element until the top block border edge is `10%` past the container's bottom edge; it is full size, fully opaque, and magenta. At that point, the animation is applied and it is styled with the values defined by the `0%` keyframe selector. When the `animation-range-end` is reached, 25% from the top of the scrollport, it jumps back to its original styling. +Note how the `from`, or `0%`, keyframe property values are not applied to the animated element until the top block border edge is `10%` past the container's bottom edge; it is full size, fully opaque, and magenta. At that point, the animation is applied and it is styled with the values defined by the `0%` [keyframe selector](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors). When the `animation-range-end` is reached, 25% from the top of the scrollport, it jumps back to its original styling. Generally, you will want to set `animation-fill-mode: both` when creating [scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations). The jump to the default state occurs because we did not set the {{cssxref("animation-fill-mode")}} property on the element, which can be used to apply an animation's styles to an element before and after the animation's execution. We initially omitted the property in this example to better enable visualizing the effects of `animation-range`. diff --git a/files/en-us/web/css/reference/selectors/keyframe_selectors/index.md b/files/en-us/web/css/reference/selectors/keyframe_selectors/index.md new file mode 100644 index 000000000000000..e6a16f12e36a30f --- /dev/null +++ b/files/en-us/web/css/reference/selectors/keyframe_selectors/index.md @@ -0,0 +1,380 @@ +--- +title: Keyframe selectors +slug: Web/CSS/Reference/Selectors/Keyframe_selectors +page-type: css-selector +browser-compat: css.selectors.keyframe +sidebar: cssref +--- + +CSS **keyframe selectors** identify specific points in an animation timeline where keyframe styles should be applied. These selectors are used exclusively within the {{cssxref("@keyframes")}} at-rule. + +## Syntax + +```css +/* Keywords */ +from { +} +to { +} + +/* values */ +0% { +} +50% { +} +100% { +} + +/* With */ +entry 20% { +} +exit 80% { +} + +/* Selector lists */ +0%, +50%, +100% { +} +from, +to { +} +``` + +### Values + +- `from` + - : Represents the start of the animation sequence. It is equivalent to `0%`. +- `to` + - : Represents the end of the animation sequence. It is equivalent to `100%`. +- `` + - : A {{cssxref("percentage")}} between `0%` and `100%`, inclusive, representing the total progression through the animation sequence. +- ` ` + - : A {{cssxref("timeline-range-name")}} preceding a `` component represents a specific progress point within the named timeline range. + +## Description + +A `` can be the `to` or `from` keyword, a percentage between `0%` and `100%`, inclusive, or a comma-separated list of these keywords and/or percentages. When the percentage is preceded by a {{cssxref("timeline-range-name")}}, it defines a timeline range if the animation timeline is a view progress timeline; otherwise, the selector is ignored. When a comma-separated `` list is used, the style block that follows applies to all the specified progression points. + +### Valid percentage values + +Percentage values must include the percent sign (`%`). Unitless values (such as `0` and `20`) and values outside the range `0%` to `100%` (such as `-10%` or `110%`) are invalid and will cause the keyframe block to be ignored. + +### Cascade, order, precedence, and importance + +Property values set by animation `@keyframes` are more important than all normal styles, meaning no matter the [specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity), an animated value will override values that do not have an {{cssxref("important", "!important")}} flag set. Only important property values and values currently being transitioned take precedence over animated property values. + +All keyframe selectors have the same specificity. The order of keyframe selectors within the selector list does not matter. The source order only matters if a duplicate keyframe selector declares a different value for an already declared property on the same selector. + +The `!important` flag is not valid within an `@keyframes` definition. + +### Omitted start and end selectors + +If no `0%` (or `from`) or `100%` (or `to`) keyframe is specified, the browser will use the element's computed styles for those states, allowing the animation to transition smoothly from or to the element's non-animated property values. In other words, if a property is specified in a middle-of-the-timeline keyframe without being set within a starting or ending keyframe selector block, the property will animate from its original value to that value. + +For example, if an element has a `red` background color, and the following animation is applied: + +```css +@keyframes changeToPurple { + 25%, + 75% { + background-color: purple; + } +} +``` + +The background color will be `red` at the start of the animation, transitioning to `purple` a quarter of the way through the animation, remaining `purple` for half the animation, and transitioning back to `red`, the original background color, starting `75%` of the way through the {{cssxref("animation-timeline", "animation timeline", "", "nocode")}}. See the example that [omits the `to` and `from`](#omitting_to_and_from). + +#### Omitted property declarations + +When creating an `@keyframes` animation to animate multiple properties, you don't have to declare all the properties in all the keyframe selector blocks. + +For example, in the [basic usage](#basic_usage) example, the `opacity` is declared in all the keyframe selector blocks, but only start and end `transform` values are set. In that case, the element will be fully opaque `50%` of the way through the animation timeline, but the point at which the element is transformed `25vw` to the right depends on the {{cssxref("animation-timing-function")}} — it will be `50%` in the case of `linear`, but not if `ease-in` is used (which it is in this case). + +### Cascade order + +If multiple keyframe blocks use the same ``, they [cascade](/en-US/docs/Web/CSS/Guides/Cascade/Introduction). This means that if the same property is defined in multiple blocks with the same selector, the last declaration in the rule takes precedence. If they define different properties, they are merged. + +This animation repeats non-changing values in multiple selector blocks, which is not necessary: + +```css +@keyframes uglyAnimation { + 0% { + transform: translatex(0); + opacity: 0; + background-color: purple; + } + 50% { + transform: translatex(0); + opacity: 1; + background-color: purple; + } + 75% { + transform: translatex(0); + opacity: 0; + background-color: green; + } + 100% { + transform: translatex(50vw); + opacity: 0; + background-color: purple; + } +} +``` + +We can use the cascade to group values in one selector block, then override them as necessary. The following is equivalent to the previous animation, but with fewer lines of CSS: + +```css +@keyframes uglyAnimation { + 0%, + 50%, + 75%, + 100% { + transform: translatex(0); + opacity: 0; + background-color: purple; + } + 50% { + opacity: 1; + } + 75% { + background-color: green; + } + 100% { + transform: translatex(50vw); + } +} +``` + +Order is important! We can't ignore the cascade. If we reorder the above incorrectly, we lose the transitions. The following makes the element purple, fully opaque, and resets all the transforms during the entire time the animation is applied. The property values are applied and remain static because the last declaration overrides the declarations made in the previous keyframe selector blocks. + +```css +@keyframes makeItPurpleOnly { + 0% { + background-color: yellow; + } + 50% { + opacity: 0; + } + 75% { + background-color: green; + } + 100% { + transform: translatex(50vw); + } + 0%, + 50%, + 75%, + 100% { + transform: translatex(0); + opacity: 1; + background-color: purple; + } +} +``` + +### With named timeline ranges + +Originally defined in the [CSS animation module](/en-US/docs/Web/CSS/Guides/Animations), the [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module expanded the keyframe selector to enable view progress timeline range information to be included directly in the `@keyframes` animation definition. A {{cssxref("timeline-range-name")}} can precede the `` component of the selector to attach keyframes to specific progress points within the named timeline range. The `` represents the selected predefined named timeline range, and the `` after it represents the percentage progress between the start and end of that named timeline range. + +```css +@keyframes in-and-out { + entry 0% { + opacity: 0; + transform: translateX(100%); + } + entry 100% { + opacity: 1; + transform: translateX(0); + } + exit 0% { + opacity: 1; + transform: translateX(0); + } + exit 100% { + opacity: 0; + transform: translateX(-100%); + } +} +``` + +If the element's animation timeline does not have a corresponding named view timeline range, then any keyframes attached to points on that named timeline range are ignored. These attachment points may be outside the active interval of the animation. When this occurs, the automatic `from` (`0%`) and `to` (`100%`) keyframes are only generated for properties that don't have keyframes at or earlier than `0%` or at or after `100%`, respectively. + +## Examples + +### Basic usage + +This example demonstrates using keywords and percentages by creating a keyframe animation that uses these keyframe selector types. + +#### HTML + +We include an element that we will animate. + +```html +
I am animated
+``` + +#### CSS + +We provide some basic styling to our box: + +```css +div { + background-color: rebeccapurple; + color: white; + width: min-content; + padding: 10px; + font: 2rem sans-serif; +} +``` + +We create an {{cssxref("@keyframes")}} animation, applying styles to the `from` and `to` keywords and a middle percentage. We animate the {{cssxref("opacity")}} and the {{cssxref("transform")}} properties. + +```css +@keyframes slide-and-fade { + from { + transform: translatex(0); + opacity: 0; + } + 50% { + opacity: 1; + } + to { + transform: translatex(50vw); + opacity: 0; + } +} +``` + +We apply our animation to the element using the {{cssxref("animation")}} shorthand property: + +```css +div { + animation: slide-and-fade 4s ease-in infinite; +} +``` + +#### Results + +{{EmbedLiveSample("Basic usage","100%","200")}} + +### Selector lists + +Using the same HTML and basic styling as in the previous example, this example demonstrates the use of comma-separated selectors to group keyframes, applying the same styles at multiple points in an animation. + +```html hidden +
I am animated
+``` + +#### CSS + +We create a `pulse` animation that changes the size of our element. + +```css +div { + animation: pulse 4s linear infinite; +} + +@keyframes pulse { + 0%, + 75% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } + 25%, + 100% { + transform: scale(0.8); + } +} +``` + +```css hidden +div { + background-color: rebeccapurple; + color: white; + width: min-content; + padding: 10px; + font: 2rem sans-serif; +} +``` + +#### Result + +{{EmbedLiveSample("Selector lists and initial values","100%","125")}} + +By using a selector list with multiple comma-separated keyframe selectors, the animation "pauses" from the `25%` keyframe until it reaches the `75%` keyframe. + +### Omitting `to` and `from` + +This example demonstrates how, when the `to` or `from` keyframe selectors are not included in a `@keyframes` animation definition, the animated properties will animate to and from the original, non-animated property values. + +#### HTML + +We include a few elements. We will be animating all of them. + +```html +
I am animated
+
I am animated
+
I am animated
+``` + +#### CSS + +We provide basic styles to our elements, and give each one a different {{cssxref("outline-width")}} and {{cssxref("background-color")}}. We will animate these two properties. + +```css +div { + background-color: magenta; + outline: 10px dashed black; + color: white; + width: min-content; + padding: 10px; + font: 2rem sans-serif; + margin: 35px auto; + + animation: changes 5s linear infinite; +} +div:first-of-type { + background-color: blue; + outline-width: 0; +} +div:last-of-type { + background-color: green; + outline-width: 20px; +} +``` + +We create an animation that sets an element's `background-color` and `outline-width` at `30%` and `40%` keyframes. + +```css +@keyframes changes { + 30%, 40% { + background-color: black; + outline-width: 15px; +} +``` + +#### Result + +{{EmbedLiveSample("Omitting to and from","100%","420")}} + +The `background-color` and `outline-width` properties are set in `30%` and `40%` keyframes. As a result, the elements' `background-color` values animate from `green`, `magenta`, and `blue` to `black` while their `outline-width` values animate from `0px`, `10px`, and `20px` to `15px`. They remain in that state for one-tenth of the animation — between `30%` and `40%` duration. After `40%` duration, these properties animate back to their initial values again. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("@keyframes")}} +- {{cssxref("animation")}} +- {{cssxref("animation-range")}} +- [Using CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- [CSS animations](/en-US/docs/Web/CSS/CSS_Animations) module +- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations)