From cbdae184398fb05d72f1aaea567a0b3bff5dbf38 Mon Sep 17 00:00:00 2001 From: Luke <55367595+luke-whos-here@users.noreply.github.com> Date: Fri, 28 Aug 2026 17:15:29 +0100 Subject: [PATCH 1/4] Document playback behavior on main relevant pages - Document playback behavior on keyframe-animations page. - Document attribute options on animation-settings page. - Opportunistic style edits, including removal of redundant tables copied on both pages. --- docs/graphics-animation/animation-settings.md | 46 ++-- .../graphics-animation/keyframe-animations.md | 201 +++++++++--------- 2 files changed, 130 insertions(+), 117 deletions(-) diff --git a/docs/graphics-animation/animation-settings.md b/docs/graphics-animation/animation-settings.md index 25e22bd31..47663473b 100644 --- a/docs/graphics-animation/animation-settings.md +++ b/docs/graphics-animation/animation-settings.md @@ -41,7 +41,7 @@ This section describes how `Animation` playback can be customized. ## Easing functions -`Easing` functions describe how quickly an animated property changes from its starting value into its ending value across the animation time. `Avalonia.Animation.Easings` contains the following easings: +Easing functions describe how quickly an animated property changes from its starting value into its ending value across the animation time. `Avalonia.Animation.Easings` contains the following easings: | Default | |---------------------------------------------------------------| @@ -62,38 +62,48 @@ This section describes how `Animation` playback can be customized. Additionally, you can provide your own easing by deriving from `Easing` or by providing parameters to `SplineEasing` or `SpringEasing`. -## FillModes +## Fill mode -The `FillMode` attribute of an `Animation` defines how the animated property persists after an animation completes and during delays in-between runs. - -The following table describes the supported behaviors: +The `FillMode` attribute of an `Animation` defines how the animated property persists after an animation completes and during delays in between runs. | Value | Description | |------------|-----------------------------------------------------------------------------------------------------------| -| `None` | Value will not persist after animation nor the first value will be applied when the animation is delayed. | -| `Forward` | The last interpolated value will be persisted to the target property. | -| `Backward` | The first interpolated value will be displayed on animation delay. | -| `Both` | Both `Forward` and `Backward` behaviors will be applied. | +| `None` | Last value does not persist after animation. First value is not applied if the animation is delayed. | +| `Forward` | The last interpolated value is persisted after the animation ends. | +| `Backward` | The first interpolated value is displayed if the animation is delayed. | +| `Both` | Both `Forward` and `Backward` behaviors are applied. | -## PlaybackDirection +## Playback direction -`PlaybackDirection` defines how the `Animation` will be played. The following table describes the possible settings: +`PlaybackDirection` defines how the `Animation` is played. By default, an animation plays forward, following the profile of the easing function from left to right. | Value | Description | |--------------------|---------------------------------------------------------| -| `Normal` | The animation is played normally. | -| `Reverse` | The animation is played in reverse direction. | -| `Alternate` | The animation is played forwards first, then backwards. | -| `AlternateReverse` | The animation is played backwards first, then forwards. | +| `Normal` | (Default) Played forward. | +| `Reverse` | Played backward. | +| `Alternate` | Played forward first, then backward. | +| `AlternateReverse` | Played backward first, then forward. | + +## Playback behavior + +By default, a keyframe animation pauses when its target control is not effectively visible. When the control becomes visible again, the animation resumes from where it paused. + +This behavior is intended to avoid waking the CPU to run animations the user cannot see. A control becomes effectively invisible when `IsVisible` is `false` on the control itself, or when an ancestor is hidden. + +| Value | Description | +| ----------------| ----------------------- | +| `Auto` | (Default) Animation pauses when the control is not effectively visible. Does not apply if the animation started with `RunAsync`, or if any keyframes of the animation set `IsVisible="True"`. | +| `Always` | Animation always plays, regardless of visibility. | +| `OnlyIfVisible` | Animation always pauses when the control is not effectively visible, even if started with `RunAsync`. | -## IterationCount +## Iteration count The `IterationCount` on an `Animation` element sets how many times it is to be replayed. There are two formats for this setting: | Value | Description | |------------|--------------------------------------------------| -| `N` | (N is an integer) - play N times. N can be zero. | -| `Infinite` | Repeats forever | +| `N` | Where N is an integer. Play N times. N can be zero. | +| `infinite` | Repeats forever. | ## See also diff --git a/docs/graphics-animation/keyframe-animations.md b/docs/graphics-animation/keyframe-animations.md index 1512fe2d0..5d8c0b343 100644 --- a/docs/graphics-animation/keyframe-animations.md +++ b/docs/graphics-animation/keyframe-animations.md @@ -14,96 +14,91 @@ import BounceEaseInScreenshot from '/img/guides/ui-development/graphics/bounce-e You can use a keyframe animation to change one or more control properties following a timeline. The keyframes are defined in _Avalonia UI_ styles with **cue** points along the **duration** of the animation, and set the intermediate values of the properties at a point in time. Diagram showing keyframe animation timeline with cue points +
The property values between keyframes are set following the profile of an **easing function**. The default easing function is a straight-line interpolation. The animation is triggered to start, and then can run any number of times, in either direction. There are also options to delay the start of the animation, and to repeat it. -:::info -If you are familiar with keyframe animations keyframe work in CSS, you will recognise the similarity with how they are done in in _Avalonia UI_. -::: - -## Example +In Avalonia, keyframe animations are defined using styles. See [Styles](/docs/styling/styles) for more information. -You define a keyframe animation using styles. - -:::info -To revise how _Avalonia UI_ uses styles, see the [styles concept](/docs/styling/styles). -::: +## Animating a property -Follow this procedure to define a simple color fade animation using XAML: +To define a one-property animation on a control, such as a color fade: -- Create a styles collection at your chosen level. -- Add a style to the collection with a selector that can target the control you want to animate. -- Add a `Setter` element to define the property that you wan the animation to change. In this example `` -- Add a `Style.Animations` element to contain your animation. -- Add an `Animation` element and set its `Duration` attribute. This is in the format `"Hours:Minutes:Seconds"`. -- Now define the keyframes for the animation. This example uses cues at 0% and 100%. -- Add `Setter` elements to each keyframe for value of the fill opacity. This example animates between opacity values of 0.0 and 1.0. +1. Create a styles collection at your chosen level. +2. Add a style to the collection with a selector targeting the control. +3. Add a `Setter` to define the property you want the animation to change, e.g., `Fill` in the below example. +4. Add a `Style.Animations` tag for the animation itself. +5. Add an `Animation` tag and set its `Duration` attribute. This is in the format `"Hours:Minutes:Seconds"`. +6. Define the keyframes for the animation. The below example uses cues at 0% and 100%. +7. Each keyframe needs its own `Setter` to the value of the fill opacity. -The finished code will look like this: + ```xml - - - - - - - -``` - -The resulting animation looks like this: + + + + -Animation showing a red rectangle fading in + + +``` -The animation runs as soon as the rectangle control is loaded and can be selected by the style. In fact it runs in the preview pane as well! + ## Animate two properties -This example shows you how to animate two properties on the same timeline. +This example shows you how to animate two properties on one timeline. This time, the blue rectangle fades and rotates at the same time. + + ```xml - - - -``` + -The red rectangle is faded-in and rotated at the same time. + + +``` -Animation showing a red rectangle fading in and rotating simultaneously + ## Configuring animation ### Delay -You can add a delay to the start of an animation by setting the delay attribute of the animation element. For example: +You can add a delay to the start of an animation by setting the `Delay` attribute. ```xml ... -``` -To repeat an animation indefinitely, use the special `"INFINITE"` value. For example: - -```xml - + + ... ``` ### Playback direction -By default an animation plays forward, following the profile of the easing function from left to right. You can alter this behavior by setting the `PlaybackDirection` attribute on the animation element: +By default, an animation plays forward, following the profile of the easing function from left to right. You can alter this behavior by setting the `PlaybackDirection` attribute. ```xml - + ... ``` -The following table describes the options: - -
ValueDescription
Normal(Default) The animation is played forwards.
ReverseThe animation is played in reverse direction.
AlternateThe animation is played forwards first, then backwards.
AlternateReverseThe animation is played backwards first, then forwards.
+For a full list of `PlaybackDirection` options, see the [animation settings reference](/docs/graphics-animation/animation-settings#playback-direction). ### Fill mode -The fill mode attribute of an animation defines how the properties being set will persist after it runs, or during any gaps between runs. For example: +The fill mode attribute of an animation defines how the properties being set will persist after it runs, or during gaps between runs. ```xml @@ -154,37 +145,48 @@ The fill mode attribute of an animation defines how the properties being set wil ``` -The following table describes the options: +For a full list of `FillMode` options, see the [animation settings reference](/docs/graphics-animation/animation-settings#fill-mode). -
ValueDescription
NoneValue will not persist after animation nor the first value will be applied when the animation is delayed.
ForwardThe last interpolated value will be persisted to the target property.
BackwardThe first interpolated value will be displayed on animation delay.
BothBoth Forward and Backward behaviors will be applied.
+### Playback behavior -### Easing function +By default, a keyframe animation pauses when its target control is not effectively visible. When the control becomes visible again, the animation resumes from where it paused. -An easing function defines how a property is varied over time during an animation. +You can change this behavior by setting the playback behavior attribute. -
+```xml + + ... + +``` -Graph showing linear easing function +For a full list of `PlaybackBehavior` options, see the [animation settings reference](/docs/graphics-animation/animation-settings#playback-behavior). -Graph showing bounce ease-in easing function +:::info +This playback behavior applies to keyframe animations only. [Control transitions](/docs/graphics-animation/control-transitions) and [composition animations](/docs/graphics-animation/composition-animations) are not affected. +::: -
+### Easing functions -The default easing function is linear (above left), but you use another pattern by setting the name of the desired function in the easing attribute. For example to use the 'bounce ease in' function (above right): +An easing function defines how a property is varied over time during an animation. + +Graph showing linear easing function +
+ +The default easing function is linear (above). You can use another pattern by setting the name of the desired function in the `Easing` attribute. For example, to use the 'bounce ease in' function (below): ```xml ... ``` -:::info -For a full list of the _Avalonia UI_ easing functions, see the [animation settings reference](/docs/graphics-animation/animation-settings). -::: +Graph showing bounce ease-in easing function +
-You can also add your own custom easing function class like this: +You can also create a custom easing function class and apply it like so: ```xml ``` -## Running animation from the code behind +For a full list of easing functions, see the [animation settings reference](/docs/graphics-animation/animation-settings#easing-functions). + +## Running animations from code-behind -In some situations, developers need more flexibility with animation lifetime, comparing to the XAML style selectors. Easiest would be to define animation in the `Resources` dictionary. +For deeper control of the animation lifetime, you can define an animation as a `Resource`, so it can be used in the code-behind. -While defining `Animation` this way, it's important to specify both `x:Key` and `x:SetterTargetType`. First one will be used to access animation by the key, and second helps compiler to create strongly typed setters. +When defining an animation as a resource, you must set an `x:Key` to allow the animation to be accessed, a well as an `x:SetterTargetType` to specify the target control. ```xml + // highlight-start @@ -221,7 +227,7 @@ While defining `Animation` this way, it's important to specify both `x:Key` and ``` -Now, this animation can be accessed and executed in a custom code behind handler. +The `ResourceAnimation` defined above can now be accessed in a code-behind handler. ```csharp var animation = (Animation)this.Resources["ResourceAnimation"]; @@ -229,14 +235,11 @@ var animation = (Animation)this.Resources["ResourceAnimation"]; await animation.RunAsync(Rect); ``` -`RunAsync` returns a task which is completed with the animation. If animation is infinite/repeating, task will never end, unless cancelled externally by passing `CancellationToken` to the RunAsync method. - -:::info -While it's easier to define animations in XAML, it's also possible to do completely in C# code. It's possible to create an instance of `Animation` type, and populate key frames collection. -::: +`RunAsync` returns a task which is completed when the animation ends. If an animation repeats infinitely, the task never ends, unless (1) the `RunAsync` method is cancelled by a `CancellationToken`, or (2) the target control is detached from the visual tree. ## See also - [Animation Settings](/docs/graphics-animation/animation-settings): Duration, delay, iteration count, and playback direction. - [Easing Functions](/docs/graphics-animation/easing-functions): All available easing functions. -- [Control Transitions](/docs/graphics-animation/control-transitions): Animating property changes with transitions. \ No newline at end of file +- [Control Transitions](/docs/graphics-animation/control-transitions): Animating property changes with transitions. +- [PlaybackBehavior](/api/avalonia/animation/playbackbehavior): API reference for visibility-based playback control. \ No newline at end of file From cc8522a279669bbb6f0e096e78cb6406e7fd76e1 Mon Sep 17 00:00:00 2001 From: Luke <55367595+luke-whos-here@users.noreply.github.com> Date: Fri, 28 Aug 2026 17:33:20 +0100 Subject: [PATCH 2/4] Edit animations page - Edit animations page to mention playback behavior. - Opportunistic upgrade of triggering demo to use XAML live preview. --- docs/graphics-animation/animations.md | 37 +++++++++++++++++++-------- 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/docs/graphics-animation/animations.md b/docs/graphics-animation/animations.md index 53bc29101..e07573db3 100644 --- a/docs/graphics-animation/animations.md +++ b/docs/graphics-animation/animations.md @@ -91,21 +91,35 @@ See [Composition Animations](/docs/graphics-animation/composition-animations) fo Keyframe animations defined in XAML rely on style selectors for their triggering behavior: - **Unconditional selector** (e.g., `Style Selector="Border"`): The animation starts when the control enters the visual tree. -- **Conditional selector** (e.g., `Style Selector="Border:pointerover"`): The animation runs when the selector matches (pointer is over the border) and stops when it no longer matches. +- **Conditional selector** (e.g., `Style Selector="Border:pointerover"`): The animation runs when the selector condition matches (e.g., pointer is over the border) and stops when it no longer matches. + + ```xml - + + + + + + ``` + + +:::info +By default, a style-applied keyframe animation pauses when its control is effectively invisible, and resumes when the control is visible again. See [Playback behavior](/docs/graphics-animation/keyframe-animations#playback-behavior). +::: + ## Animation settings Keyframe animations support these configuration options: @@ -114,10 +128,11 @@ Keyframe animations support these configuration options: |---|---|---| | `Duration` | How long one cycle takes. | `0:0:1` (1 second) | | `Delay` | Time to wait before starting. | `0:0:0.5` | -| `IterationCount` | Number of times to repeat. Use `INFINITE` for forever. | `3`, `INFINITE` | -| `PlaybackDirection` | Direction of playback. | `Normal`, `Reverse`, `Alternate`, `AlternateReverse` | -| `FillMode` | What happens when the animation ends. | `Forward`, `Backward`, `Both`, `None` | | `Easing` | The interpolation curve between keyframes. | `CubicEaseInOut` | +| `FillMode` | What happens when the animation ends. | `Forward`, `Backward`, `Both`, `None` | +| `IterationCount` | Number of times to repeat. Use `infinite` for forever. | `3`, `INFINITE` | +| `PlaybackBehavior` | Whether to pause the animation when the control is hidden. | +| `PlaybackDirection` | Direction of playback. | `Normal`, `Reverse`, `Alternate`, `AlternateReverse` | `Auto`, `Always`, `OnlyIfVisible` | See [Animation Settings](/docs/graphics-animation/animation-settings) for details on each option and [Easing Functions](/docs/graphics-animation/easing-functions) for all available easing types. From 1b55366a69b2665194aba517d74bf076c8706f1a Mon Sep 17 00:00:00 2001 From: Luke <55367595+luke-whos-here@users.noreply.github.com> Date: Fri, 28 Aug 2026 17:57:33 +0100 Subject: [PATCH 3/4] Add references and notes on related pages Add notes to pages peripherally touching the topic of keyframe animations pausing when hidden, and add crosslinks to the main keyframe-animations page to improve discoverability. --- docs/app-development/performance.md | 6 ++++-- docs/graphics-animation/control-transitions.md | 6 +++++- docs/graphics-animation/effects.md | 6 +++--- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/docs/app-development/performance.md b/docs/app-development/performance.md index 7e10198d4..1a744bdac 100644 --- a/docs/app-development/performance.md +++ b/docs/app-development/performance.md @@ -180,7 +180,9 @@ myControl2.Height = 200; ### Hiding unused controls with `IsVisible` -Setting `IsVisible="False"` removes a control from both layout and rendering. The layout system skips the measure and arrange passes for that control and its entire subtree, and the renderer does not draw it. This makes `IsVisible` an effective way to reduce work for conditionally shown content: +Setting `IsVisible="False"` can reduce work for conditionally shown content by removing a control from both layout and rendering. The layout system skips the measure and arrange passes for that control and its entire subtree, and the renderer does not draw it. + +In addition, hiding a control also pauses any [keyframe animations]((/docs/graphics-animation/keyframe-animations#playback-behavior)) running on it or its subtree, which stops them from waking the CPU on an idle UI. ```xml @@ -190,7 +192,7 @@ Setting `IsVisible="False"` removes a control from both layout and rendering. Th ``` -If you need to hide a control visually while keeping its layout space reserved, use `Opacity="0"` instead. An element with `Opacity="0"` still participates in layout and can receive input. +If you need to hide a control visually while keeping its layout space reserved, use `Opacity="0"` instead. An element with `Opacity="0"` still participates in layout, can receive input, and its keyframe animations continue playing. ### Using `ClipToBounds` judiciously diff --git a/docs/graphics-animation/control-transitions.md b/docs/graphics-animation/control-transitions.md index 33d38dd9e..b33e7cfbb 100644 --- a/docs/graphics-animation/control-transitions.md +++ b/docs/graphics-animation/control-transitions.md @@ -5,7 +5,11 @@ description: Configure transitions that animate property changes on Avalonia con doc-type: how-to --- -Transitions in Avalonia are also heavily inspired by CSS Animations. They listen to any changes in target property's value and subsequently animates the change according to its parameters. They can be defined on any `Control` via the [`Transitions`](/api/avalonia/animation/transitions) property: +Transitions in Avalonia are also heavily inspired by CSS Animations. They listen to any changes in target property's value and subsequently animates the change according to its parameters. They can be defined on any `Control` via the [`Transitions`](/api/avalonia/animation/transitions) property. + +:::note +Unlike [keyframe animations](/docs/graphics-animation/keyframe-animations), transitions do not pause on hidden controls. +::: ## Basic usage diff --git a/docs/graphics-animation/effects.md b/docs/graphics-animation/effects.md index a72ba2ad1..2778757b9 100644 --- a/docs/graphics-animation/effects.md +++ b/docs/graphics-animation/effects.md @@ -238,10 +238,10 @@ Values range from `0.0` (fully transparent) to `1.0` (fully opaque). Unlike `Opa ### IsVisible vs Opacity -| Approach | Layout impact | Interaction | +| Approach | Layout impact | Interaction | Animations | |---|---|---| -| `IsVisible="False"` | Element is removed from layout. | Cannot receive input. | -| `Opacity="0"` | Element still occupies space. | Can still receive pointer and keyboard input. | +| `IsVisible="False"` | Element is removed from layout. | Cannot receive input. | [Keyframe animations](/docs/graphics-animation/keyframe-animations) pause. | +| `Opacity="0"` | Element still occupies space. | Can still receive pointer and keyboard input. | [Keyframe animations](/docs/graphics-animation/keyframe-animations) keep running. | ## Animating effects From a03c7ab7a270096b6bd14dd642e9bba7e52eea0d Mon Sep 17 00:00:00 2001 From: Luke <55367595+luke-whos-here@users.noreply.github.com> Date: Tue, 1 Sep 2026 09:58:14 +0100 Subject: [PATCH 4/4] Address Copilot comments --- docs/app-development/performance.md | 2 +- docs/graphics-animation/animation-settings.md | 2 +- docs/graphics-animation/animations.md | 4 ++-- docs/graphics-animation/control-transitions.md | 2 +- docs/graphics-animation/effects.md | 4 ++-- docs/graphics-animation/keyframe-animations.md | 4 ++-- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/app-development/performance.md b/docs/app-development/performance.md index 1a744bdac..81b55ca10 100644 --- a/docs/app-development/performance.md +++ b/docs/app-development/performance.md @@ -182,7 +182,7 @@ myControl2.Height = 200; Setting `IsVisible="False"` can reduce work for conditionally shown content by removing a control from both layout and rendering. The layout system skips the measure and arrange passes for that control and its entire subtree, and the renderer does not draw it. -In addition, hiding a control also pauses any [keyframe animations]((/docs/graphics-animation/keyframe-animations#playback-behavior)) running on it or its subtree, which stops them from waking the CPU on an idle UI. +In addition, hiding a control also pauses any [keyframe animations](/docs/graphics-animation/keyframe-animations#playback-behavior) running on it or its subtree by default, which stops them from waking the CPU on an idle UI. ```xml diff --git a/docs/graphics-animation/animation-settings.md b/docs/graphics-animation/animation-settings.md index 47663473b..e590f2863 100644 --- a/docs/graphics-animation/animation-settings.md +++ b/docs/graphics-animation/animation-settings.md @@ -92,7 +92,7 @@ This behavior is intended to avoid waking the CPU to run animations the user can | Value | Description | | ----------------| ----------------------- | -| `Auto` | (Default) Animation pauses when the control is not effectively visible. Does not apply if the animation started with `RunAsync`, or if any keyframes of the animation set `IsVisible="True"`. | +| `Auto` | (Default) Animation pauses when the control is not effectively visible. Animations started with `RunAsync`, or containing keyframes where `IsVisible="True"`, always play regardless of visibility. | | `Always` | Animation always plays, regardless of visibility. | | `OnlyIfVisible` | Animation always pauses when the control is not effectively visible, even if started with `RunAsync`. | diff --git a/docs/graphics-animation/animations.md b/docs/graphics-animation/animations.md index e07573db3..c772542e1 100644 --- a/docs/graphics-animation/animations.md +++ b/docs/graphics-animation/animations.md @@ -131,8 +131,8 @@ Keyframe animations support these configuration options: | `Easing` | The interpolation curve between keyframes. | `CubicEaseInOut` | | `FillMode` | What happens when the animation ends. | `Forward`, `Backward`, `Both`, `None` | | `IterationCount` | Number of times to repeat. Use `infinite` for forever. | `3`, `INFINITE` | -| `PlaybackBehavior` | Whether to pause the animation when the control is hidden. | -| `PlaybackDirection` | Direction of playback. | `Normal`, `Reverse`, `Alternate`, `AlternateReverse` | `Auto`, `Always`, `OnlyIfVisible` | +| `PlaybackBehavior` | Whether to pause the animation when the control is hidden. | `Normal`, `Reverse`, `Alternate`, `AlternateReverse` | +| `PlaybackDirection` | Direction of playback. | `Auto`, `Always`, `OnlyIfVisible` | See [Animation Settings](/docs/graphics-animation/animation-settings) for details on each option and [Easing Functions](/docs/graphics-animation/easing-functions) for all available easing types. diff --git a/docs/graphics-animation/control-transitions.md b/docs/graphics-animation/control-transitions.md index b33e7cfbb..81e462dcf 100644 --- a/docs/graphics-animation/control-transitions.md +++ b/docs/graphics-animation/control-transitions.md @@ -5,7 +5,7 @@ description: Configure transitions that animate property changes on Avalonia con doc-type: how-to --- -Transitions in Avalonia are also heavily inspired by CSS Animations. They listen to any changes in target property's value and subsequently animates the change according to its parameters. They can be defined on any `Control` via the [`Transitions`](/api/avalonia/animation/transitions) property. +Transitions in Avalonia are also heavily inspired by CSS Animations. They listen to any changes in target property's value and subsequently animate the change according to its parameters. They can be defined on any `Control` via the [`Transitions`](/api/avalonia/animation/transitions) property. :::note Unlike [keyframe animations](/docs/graphics-animation/keyframe-animations), transitions do not pause on hidden controls. diff --git a/docs/graphics-animation/effects.md b/docs/graphics-animation/effects.md index 2778757b9..226b4366b 100644 --- a/docs/graphics-animation/effects.md +++ b/docs/graphics-animation/effects.md @@ -239,8 +239,8 @@ Values range from `0.0` (fully transparent) to `1.0` (fully opaque). Unlike `Opa ### IsVisible vs Opacity | Approach | Layout impact | Interaction | Animations | -|---|---|---| -| `IsVisible="False"` | Element is removed from layout. | Cannot receive input. | [Keyframe animations](/docs/graphics-animation/keyframe-animations) pause. | +| --- | --- | --- | --- | +| `IsVisible="False"` | Element is removed from layout. | Cannot receive input. | [Keyframe animations](/docs/graphics-animation/keyframe-animations) pause by default. | | `Opacity="0"` | Element still occupies space. | Can still receive pointer and keyboard input. | [Keyframe animations](/docs/graphics-animation/keyframe-animations) keep running. | ## Animating effects diff --git a/docs/graphics-animation/keyframe-animations.md b/docs/graphics-animation/keyframe-animations.md index 5d8c0b343..de307bff4 100644 --- a/docs/graphics-animation/keyframe-animations.md +++ b/docs/graphics-animation/keyframe-animations.md @@ -151,7 +151,7 @@ For a full list of `FillMode` options, see the [animation settings reference](/d By default, a keyframe animation pauses when its target control is not effectively visible. When the control becomes visible again, the animation resumes from where it paused. -You can change this behavior by setting the playback behavior attribute. +You can change this behavior by setting the `PlaybackBehavior` attribute. ```xml @@ -204,7 +204,7 @@ For a full list of easing functions, see the [animation settings reference](/doc For deeper control of the animation lifetime, you can define an animation as a `Resource`, so it can be used in the code-behind. -When defining an animation as a resource, you must set an `x:Key` to allow the animation to be accessed, a well as an `x:SetterTargetType` to specify the target control. +When defining an animation as a resource, you must set an `x:Key` to allow the animation to be accessed, as well as an `x:SetterTargetType` to specify the target control. ```xml