In Out Animation

Main.xaml

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid.Resources>
    <ControlTemplate x:Key="imgBtn" TargetType="ToggleButton">
      <Ellipse x:Name="img" Fill="Silver" RenderTransformOrigin="1,0.75">
        <Ellipse.RenderTransform>
          <ScaleTransform/>
        </Ellipse.RenderTransform>
      </Ellipse>
      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter TargetName="img" Property="Fill" Value="LightGray"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="True">
          <Setter TargetName="img" Property="Fill" Value="LightBlue"/>
          <Trigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="img" Storyboard.TargetProperty="RenderTransform.ScaleX">
                  <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="3">
                    <EasingDoubleKeyFrame.EasingFunction>
                      <CircleEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                  </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="img" Storyboard.TargetProperty="RenderTransform.ScaleY">
                  <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="3">
                    <EasingDoubleKeyFrame.EasingFunction>
                      <CircleEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                  </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
              </Storyboard>
            </BeginStoryboard>
          </Trigger.EnterActions>
          <Trigger.ExitActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="img" Storyboard.TargetProperty="RenderTransform.ScaleX">
                  <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                      <CubicEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                  </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="img" Storyboard.TargetProperty="RenderTransform.ScaleY">
                  <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                      <CubicEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                  </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
              </Storyboard>
            </BeginStoryboard>
          </Trigger.ExitActions>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Grid.Resources>
  <Border Width="500" Height="1100" Background="Black" CornerRadius="20">
    <StackPanel Margin="20">
      <Border Height="300" Background="Beige" CornerRadius="10,10,0,0"/>
      <Border Background="#222" Padding="30,80" Panel.ZIndex="10">
        <StackPanel Orientation="Horizontal">
          <StackPanel>
            <TextBlock Text="Savanna Trek" Foreground="White" FontSize="30" Margin="0,0,0,0"/>
            <TextBlock Text="15-min drive followed by an hour-long walk" Foreground="White" FontSize="12"/>
          </StackPanel>
          <ToggleButton Width="120" Height="120" Margin="40,-20,0,0" Template="{StaticResource imgBtn}"/>
        </StackPanel>
      </Border>
      <Border Height="500" Background="White"/>
    </StackPanel>
  </Border>
</Grid>