Keyframe Animations

Search…
Keyframe Animations
Keyframe animations in Avalonia are heavily inspired by CSS Animations. They can be used to animate any number of properties on a control, using any number of keyframes to define the states that each property must pass through. Keyframe animations can run any number of times, in either direction.
Defining A Keyframe Animation
Keyframe animations are applied using styles. They can be defined on any style by adding an Animation object to the Style.Animation property:
1
<Window xmlns="https://github.com/avaloniaui">
2
    <Window.Styles>
3
        <Style Selector="Rectangle.red">
4
            <Setter Property="Height" Value="100"/>
5
            <Setter Property="Width" Value="100"/>
6
            <Setter Property="Fill" Value="Red"/>
7
            <Style.Animations>
8
                <Animation Duration="0:0:1"> 
9
                    <KeyFrame Cue="0%">
10
                        <Setter Property="Opacity" Value="0.0"/>
11
                    </KeyFrame>
12
                    <KeyFrame Cue="100%">
13
                        <Setter Property="Opacity" Value="1.0"/>
14
                    </KeyFrame>
15
                </Animation>
16
            </Style.Animations>
17
        </Style>
18
    </Window.Styles>
19
​
20
    <Rectangle Classes="red"/>
21
</Window>
Copied!
The example above animates the target Control as defined by its selector. It will be run immediately when the control is loaded.
Triggering Animations
Unlike WPF's Triggers, Animations defined in XAML rely on selectors for their triggering behavior. Selectors can always apply to a control, or they can conditionally apply (for example if the control has a style class appled).
If the selector isn't conditional then the animation will be triggered when a matching Control is spawned into the visual tree. Otherwise, the animations will run whenever its selector is activated. When the selector no longer matches, the currently running animation will be canceled.
KeyFrames
The KeyFrame objects defines when the target Setter objects should be applied on the target Control, with value interpolation in-between.
The Cue property of an KeyFrame object is based on the Duration of the parent animation and can be an absolute time index (i.e., "0:0:1") or a percent of the animation's Duration (i.e., "0%", "100%"). However, Cue's value should not exceed the Duration specified.
All Animation objects should contain at least one KeyFrame, with a Setter that has target property and value.
Multiple properties can be also animated in a single Animation by adding additional Setter objects on the desired KeyFrame:
1
<Animation Duration="0:0:1"> 
2
    <KeyFrame Cue="0%">
3
        <Setter Property="Opacity" Value="0.0"/>
4
        <Setter Property="RotateTransform.Angle" Value="0.0"/>
5
    </KeyFrame>
6
    <KeyFrame Cue="100%">
7
        <Setter Property="Opacity" Value="1.0"/>
8
        <Setter Property="RotateTransform.Angle" Value="90.0"/>
9
    </KeyFrame>
10
</Animation>
Copied!
Delay
You can add a delay in a Animation by defining the desired delay time on its Delay property:
1
<Animation Duration="0:0:1"
2
           Delay="0:0:1"> 
3
    ...
4
</Animation>
Copied!
Repeat
You can set the following repeat behaviors on IterationCount property of an Animation.
Value
Description
0 to N
Play N times.
INFINITE
Repeat Indefinitely
Playback Direction
The PlaybackDirection property defines how should the animation be played, including repeats.
The following table describes the possible behaviors:
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.
Value fill modes
The FillMode property defines whether the first or last interpolated value of an animation persist before or after running an animation and on delays in-between runs.
The following table describes the possible behaviors:
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.
Easings
Easing functions can be set by setting the name of the desired function to the Animation's Easing property:
1
<Animation Duration="0:0:1"
2
           Delay="0:0:1"
3
           Easing="BounceEaseIn"> 
4
    ...
5
</Animation>
Copied!
You can also add your custom easing function class like this:
1
<Animation Duration="0:0:1"
2
           Delay="0:0:1">
3
    <Animation.Easing>
4
        <local:YourCustomEasingClassHere/>
5
    </Animation.Easing> 
6
    ...
7
</Animation>
Copied!
The following list contains the built-in easing functions.
LinearEasing (Default)
BackEaseIn
BackEaseInOut
BackEaseOut
BounceEaseIn
BounceEaseInOut
BounceEaseOut
CircularEaseIn
CircularEaseInOut
CircularEaseOut
CubicEaseIn
CubicEaseInOut
CubicEaseOut
ElasticEaseIn
ElasticEaseInOut
ElasticEaseOut
ExponentialEaseIn
ExponentialEaseInOut
ExponentialEaseOut
QuadraticEaseIn
QuadraticEaseInOut
QuadraticEaseOut
QuarticEaseIn
QuarticEaseInOut
QuarticEaseOut
QuinticEaseIn
QuinticEaseInOut
QuinticEaseOut
SineEaseIn
SineEaseInOut
SineEaseOut
Documentation - Previous
🗝️ Animations
Transitions
Last modified 2mo ago
Export as PDF
Copy link
Contents
Defining A Keyframe Animation
Triggering Animations