Create an interactive animation using XAML and the Storyboard

   
 

<Window x:Class="WpfApplication1.CombineTransformAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Animating Combine Transforms" Height="320" Width="300">
  <Window.Resources>
    <Style TargetType="{x:Type Button}">
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
      <Setter Property="Margin" Value="10" />
      <Setter Property="Width" Value="80" />
      <Setter Property="Height" Value="40" />
      <Setter Property="RenderTransform">
        <Setter.Value>
          <TransformGroup>
            <ScaleTransform />
            <SkewTransform />
            <RotateTransform />
          </TransformGroup>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard Name="StoryboardBegin">
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children&#91;0&#93;.ScaleX"
                  To="1.5" Duration="0:0:1" RepeatBehavior="1x" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children&#91;0&#93;.ScaleY"
                  To="1.5" Duration="0:0:1" RepeatBehavior="1x" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children&#91;1&#93;.AngleX"
                  To="30" Duration="0:0:1" RepeatBehavior="1x" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Rectangle.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children&#91;0&#93;.ScaleX"
                  Duration="0:0:0.5" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children&#91;0&#93;.ScaleY"
                  Duration="0:0:0.5" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children&#91;1&#93;.AngleX"
                  Duration="0:0:0.5" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>
  <StackPanel Margin="20" HorizontalAlignment="Center">
    <Button Click="btn1_Click" x:Name="btn1">Button1</Button>
    <Button Click="btn2_Click" x:Name="btn2">Button2</Button>
    <Button Click="btnClose_Click">Close</Button>
    <TextBlock Name="tb1" Margin="5,40,5,5" />
  </StackPanel>
</Window>

//File:Window.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;


namespace WpfApplication1
{
    public partial class CombineTransformAnimation : Window
    {
        public CombineTransformAnimation()
        {
            InitializeComponent();
        }

        private void btn1_Click(object sender,RoutedEventArgs e)
        {
            tb1.Text = "You are clicking on " + btn1.Content;
        }

        private void btn2_Click(object sender,RoutedEventArgs e)
        {
            tb1.Text = "You are clicking on " + btn2.Content;
        }


        private void btnClose_Click(object sender,RoutedEventArgs e)
        {
            this.Close();
        }
    }
}