Avalonia/samples/RenderDemo/Pages/AnimationsPage.xaml

<UserControl 
  xmlns="https://github.com/avaloniaui" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:viewModels="using:RenderDemo.ViewModels"
  x:Class="RenderDemo.Pages.AnimationsPage"
  x:DataType="viewModels:AnimationsPageViewModel"
  MaxWidth="600">
  <UserControl.Styles>
    <Styles>
      <Styles.Resources>
        <Template x:Key="Acorn">
          <Path Fill="White" Stretch="Uniform"
                Data="F1 M 16.6309,18.6563C 17.1309,
                8.15625 29.8809,14.1563 29.8809,
                14.1563C 30.8809,11.1563 34.1308,
                11.4063 34.1308,11.4063C 33.5,12 
                34.6309,13.1563 34.6309,13.1563C 
                32.1309,13.1562 31.1309,14.9062 
                31.1309,14.9062C 41.1309,23.9062
                32.6309,27.9063 32.6309,27.9062C 
                24.6309,24.9063 21.1309,22.1562 
                16.6309,18.6563 Z M 16.6309,19.9063C
                21.6309,24.1563 25.1309,26.1562 
                31.6309,28.6562C 31.6309,28.6562
                26.3809,39.1562 18.3809,36.1563C
                18.3809,36.1563 18,38 16.3809,36.9063C 
                15,36 16.3809,34.9063 16.3809,34.9063C
                16.3809,34.9063 10.1309,30.9062 16.6309,19.9063 Z"/>
        </Template>
        <Template x:Key="Heart">
          <Path Fill="Red" Stretch="Uniform" Data="
          M 272.70141,238.71731 
          C 206.46141,238.71731 152.70146,292.4773 152.70146,358.71731 
          C 152.70146,493.47282 288.63461,528.80461 381.26391,662.02535 
          C 468.83815,529.62199 609.82641,489.17075 609.82641,358.71731 
          C 609.82641,292.47731 556.06651,238.7173 489.82641,238.71731 
          C 441.77851,238.71731 400.42481,267.08774 381.26391,307.90481 
          C 362.10311,267.08773 320.74941,238.7173 272.70141,238.71731 z "/>
        </Template>
      </Styles.Resources>
      <Style Selector="Border.Test">
        <Setter Property="Margin" Value="15"/>
        <Setter Property="Width" Value="100"/>
        <Setter Property="Height" Value="100"/>
        <Setter Property="Child" Value="{StaticResource Acorn}"/>
      </Style>
      <Style Selector="Border.Rect1:pointerover">
        <Style.Animations>
          <Animation Duration="0:0:2.5"
                     IterationCount="4"
                     FillMode="None"
                     PlaybackDirection="AlternateReverse"
                     Easing="SineEaseInOut">
            <KeyFrame Cue="20%">
              <Setter Property="RotateTransform.Angle" Value="45"/>
            </KeyFrame>
            <KeyFrame Cue="50%">
              <Setter Property="ScaleTransform.ScaleX" Value="1.5"/>
            </KeyFrame>
            <KeyFrame Cue="80%">
              <Setter Property="RotateTransform.Angle" Value="120"/>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>
      <Style Selector="Border.Rect2:pointerover">
        <Style.Animations>
          <Animation Duration="0:0:0.5" Easing="SineEaseInOut">
            <KeyFrame Cue="50%">
              <Setter Property="ScaleTransform.ScaleX" Value="0.8"/>
              <Setter Property="ScaleTransform.ScaleY" Value="0.8"/>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>
      <Style Selector="Border.Rect3">
        <Style.Animations>
          <Animation Duration="0:0:0.5"
                     Easing="QuadraticEaseInOut"
                     IterationCount="Infinite">
            <KeyFrame Cue="50%">
              <Setter Property="ScaleTransform.ScaleX" Value="0.8"/>
              <Setter Property="ScaleTransform.ScaleY" Value="0.8"/>
            </KeyFrame>
          </Animation>
        </Style.Animations>
        <Setter Property="Child" Value="{StaticResource Heart}"/>
      </Style>
      <Style Selector="Border.Rect4:pointerover">
        <Style.Animations>
          <Animation Duration="0:0:3" Easing="BounceEaseInOut">
            <KeyFrame Cue="48%">
              <Setter Property="TranslateTransform.Y" Value="-100"/>
              <Setter Property="Background" Value="Magenta"/>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>
      <Style Selector="Border.Rect5:pointerover">
        <Style.Animations>
          <Animation Duration="0:0:3" Easing="CircularEaseInOut">
            <KeyFrame Cue="25%">
              <Setter Property="SkewTransform.AngleX" Value="-20"/>
            </KeyFrame>
            <KeyFrame Cue="75%">
              <Setter Property="SkewTransform.AngleX" Value="20"/>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>
      <Style Selector="Border.Rect6">
        <Style.Animations>
          <Animation Duration="0:0:3"
                     IterationCount="Infinite"
                     PlaybackDirection="Alternate">
            <KeyFrame Cue="0%">
              <Setter Property="Background" Value="Red"/>
            </KeyFrame>
            <KeyFrame Cue="15%">
              <Setter Property="Background" Value="Yellow"/>
            </KeyFrame>
            <KeyFrame Cue="30%">
              <Setter Property="Background" Value="Green"/>
            </KeyFrame>
            <KeyFrame Cue="45%">
              <Setter Property="Background" Value="Cyan"/>
            </KeyFrame>
            <KeyFrame Cue="60%">
              <Setter Property="Background" Value="Blue"/>
            </KeyFrame>
            <KeyFrame Cue="75%">
              <Setter Property="Background" Value="Indigo"/>
            </KeyFrame>
            <KeyFrame Cue="90%">
              <Setter Property="Background" Value="Violet"/>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>
      <Style Selector="Border.Shadow">
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Style.Animations>
          <Animation Duration="0:0:3"
                     IterationCount="Infinite"
                     PlaybackDirection="Alternate">
            <KeyFrame Cue="0%">
              <Setter Property="BoxShadow" Value="inset 0 0 0 2 Red, -15 -15 Green"/>
            </KeyFrame>
            <KeyFrame Cue="35%">
              <Setter Property="BoxShadow" Value="inset 0 0 20 2 Blue, -15 20 0 0 Blue"/>
            </KeyFrame>
            <KeyFrame Cue="70%">
              <Setter Property="BoxShadow" Value="inset 0 0 20 30 Green, 20 20 20 0 Red"/>
            </KeyFrame>
            <KeyFrame Cue="85%">
              <Setter Property="BoxShadow" Value="inset 30 0 20 30 Green, 20 20 20 10 Red"/>
            </KeyFrame>
            <KeyFrame Cue="100%">
              <Setter Property="BoxShadow" Value="inset 30 30 20 30 Green, 20 40 20 10 Red"/>
            </KeyFrame>
            
          </Animation>
        </Style.Animations>
      </Style>

      <Style Selector="Border.Rect7">
        <Style.Animations>
          <Animation Duration="0:0:3"
                     IterationCount="Infinite"
                     PlaybackDirection="Alternate">
            <KeyFrame Cue="0%">
              <Setter Property="Background" Value="Red" />
            </KeyFrame>
            <KeyFrame Cue="30%">
              <Setter Property="Background">
                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
                  <GradientStop Offset="0" Color="Red"/>
                  <GradientStop Offset="1" Color="Blue"/>
                </LinearGradientBrush>
              </Setter>
            </KeyFrame>
            <KeyFrame Cue="60%">
              <Setter Property="Background" Value="Blue" />
            </KeyFrame>
            <KeyFrame Cue="100%">
              <Setter Property="Background">
                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
                  <GradientStop Offset="0" Color="Green"/>
                  <GradientStop Offset="1" Color="Yellow"/>
                </LinearGradientBrush>
              </Setter>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>

      <Style Selector="Border.Rect8">
        <Style.Animations>
          <Animation Duration="0:0:3"
                     IterationCount="Infinite"
                     PlaybackDirection="Alternate">
            <KeyFrame Cue="0%">
              <Setter Property="Background">
                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
                  <GradientStop Offset="0" Color="Red"/>
                  <GradientStop Offset="1" Color="Blue"/>
                </LinearGradientBrush>
              </Setter>
            </KeyFrame>
            <KeyFrame Cue="50%">
              <Setter Property="Background">
                <LinearGradientBrush StartPoint="100%,0%" EndPoint="0%,100%">
                  <GradientStop Offset="0" Color="Red"/>
                  <GradientStop Offset="0.25" Color="Blue"/>
                  <GradientStop Offset="0.5" Color="Blue"/>
                  <GradientStop Offset="0.75" Color="Green"/>
                  <GradientStop Offset="1" Color="Yellow"/>
                </LinearGradientBrush>
              </Setter>
            </KeyFrame>
            <KeyFrame Cue="100%">
              <Setter Property="Background">
                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
                  <GradientStop Offset="0" Color="Red"/>
                  <GradientStop Offset="1" Color="Blue"/>
                </LinearGradientBrush>
              </Setter>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>

      <Style Selector="Border.Rect9">
        <Style.Animations>
          <Animation Duration="0:0:3"
                     IterationCount="Infinite"
                     PlaybackDirection="Alternate">
            <KeyFrame Cue="0%">
              <Setter Property="Background">
                <ConicGradientBrush Center="50%,50%" Angle="0">
                  <GradientStop Offset="0" Color="Blue"/>
                  <GradientStop Offset="0.5" Color="Red"/>
                  <GradientStop Offset="1" Color="Blue"/>
                </ConicGradientBrush>
              </Setter>
            </KeyFrame>
            <KeyFrame Cue="100%">
              <Setter Property="Background">
                <ConicGradientBrush Center="50%,70%" Angle="90">
                  <GradientStop Offset="0" Color="Green"/>
                  <GradientStop Offset="0.25" Color="Yellow"/>
                  <GradientStop Offset="0.5" Color="Red"/>
                  <GradientStop Offset="0.75" Color="Blue"/>
                  <GradientStop Offset="1" Color="Green"/>
                </ConicGradientBrush>
              </Setter>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>

      <Style Selector="Border.Rect10">
        <Style.Animations>
          <Animation Duration="0:0:3"
                     IterationCount="Infinite"
                     PlaybackDirection="Normal">
            <KeyFrame Cue="0%">
              <Setter Property="Background">
                <RadialGradientBrush Center="0%,100%" RadiusX="80%" RadiusY="80%">
                  <GradientStop Offset="0" Color="Red"/>
                  <GradientStop Offset="1" Color="Blue"/>
                </RadialGradientBrush>
              </Setter>
            </KeyFrame>
            <KeyFrame Cue="25%">
              <Setter Property="Background">
                <RadialGradientBrush Center="0%,0%" RadiusX="100%" RadiusY="100%">
                  <GradientStop Offset="0" Color="Red"/>
                  <GradientStop Offset="1" Color="Blue"/>
                </RadialGradientBrush>
              </Setter>
            </KeyFrame>
            <KeyFrame Cue="50%">
              <Setter Property="Background">
                <RadialGradientBrush Center="100%,0%" RadiusX="80%" RadiusY="80%">
                  <GradientStop Offset="0" Color="Red"/>
                  <GradientStop Offset="1" Color="Blue"/>
                </RadialGradientBrush>
              </Setter>
            </KeyFrame>
            <KeyFrame Cue="75%">
              <Setter Property="Background">
                <RadialGradientBrush Center="100%,100%" RadiusX="100%" RadiusY="100%">
                  <GradientStop Offset="0" Color="Red"/>
                  <GradientStop Offset="1" Color="Blue"/>
                </RadialGradientBrush>
              </Setter>
            </KeyFrame>
            <KeyFrame Cue="100%">
              <Setter Property="Background">
                <RadialGradientBrush Center="0%,100%" RadiusX="80%" RadiusY="80%">
                  <GradientStop Offset="0" Color="Red"/>
                  <GradientStop Offset="1" Color="Blue"/>
                </RadialGradientBrush>
              </Setter>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>
      <Style Selector="Border.Blur">
        <Style.Animations>
          <Animation Duration="0:0:3"
                     IterationCount="Infinite"
                     PlaybackDirection="Alternate">
            <KeyFrame Cue="0%">
              <Setter Property="Effect" Value="blur(0)"/>
            </KeyFrame>
            <KeyFrame Cue="100%">
              <Setter Property="Effect" Value="blur(10)"/>
            </KeyFrame>
          </Animation>
        </Style.Animations>
        <Setter Property="Child" Value="{StaticResource Acorn}"/>
      </Style>
      <Style Selector="Border.DropShadow">
        <Style.Animations>
          <Animation Duration="0:0:3"
                     IterationCount="Infinite"
                     PlaybackDirection="Alternate">
            <KeyFrame Cue="0%">
              <Setter Property="Effect" Value="drop-shadow(0 0 0)"/>
            </KeyFrame>
            <KeyFrame Cue="35%">
              <Setter Property="Effect" Value="drop-shadow(5 5 0 Green)"/>
            </KeyFrame>
            <KeyFrame Cue="70%">
              <Setter Property="Effect" Value="drop-shadow(5 5 5 Red)"/>
            </KeyFrame>
            <KeyFrame Cue="100%">
              <Setter Property="Effect" Value="drop-shadow(20 -5 5 Blue)"/>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>
    </Styles>
  </UserControl.Styles>
  <Grid>
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" ClipToBounds="False">
      <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Spacing="20">
        <TextBlock VerticalAlignment="Center">Hover to activate Keyframe Animations.</TextBlock>
      </StackPanel>
      <WrapPanel ClipToBounds="False">
        <Border Classes="Test Rect1" Background="DarkRed"/>
        <Border Classes="Test Rect2" Background="Magenta"/>
        <Border Classes="Test Rect3"/>
        <Border Classes="Test Rect4" Background="Navy"/>
        <Border Classes="Test Rect5" Background="SeaGreen"/>
        <Border Classes="Test Rect6" Background="Red"/>
        <Border Classes="Test Shadow" CornerRadius="10" Child="{x:Null}" />
        <Border Classes="Test Shadow" CornerRadius="0 30 60 0" Child="{x:Null}" />
        <Border Classes="Test Rect7" Child="{x:Null}" />
        <Border Classes="Test Rect8" Child="{x:Null}" />
        <Border Classes="Test Rect9" Child="{x:Null}" />
        <Border Classes="Test Rect10" Child="{x:Null}" />
        <Border Classes="Test Blur" Background="#ffa0a0a0" BorderThickness="4" BorderBrush="Yellow" Padding="10"/>
        <Border Classes="Test DropShadow" Background="Transparent" BorderThickness="4" BorderBrush="Yellow">
          <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Drop
            Shadow</TextBlock>
        </Border>
      </WrapPanel>
    </StackPanel>
  </Grid>
</UserControl>