title: WPF visual state transition won't animate
body: <p>I am trying to animate the position of an element using visual states. The problem I have is that, rather than animate, it waits the transition period (0.333 seconds) and pops to the end position. What am I doing wrong?</p>
  
  <pre><code>&lt;UserControl x:Class="Namespace.UpdateNotificationView" x:Name="UserControl"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"&gt;
  &lt;Grid x:Name="LayoutRoot"&gt;
      &lt;VisualStateManager.VisualStateGroups&gt;
          &lt;VisualStateGroup x:Name="UpdatesViewState"&gt;
              &lt;VisualStateGroup.Transitions&gt;
                  &lt;VisualTransition GeneratedDuration="0:0:0.333"&gt;
                      &lt;VisualTransition.GeneratedEasingFunction&gt;
                          &lt;CircleEase EasingMode="EaseInOut"/&gt;
                      &lt;/VisualTransition.GeneratedEasingFunction&gt;
                  &lt;/VisualTransition&gt;
              &lt;/VisualStateGroup.Transitions&gt;
              &lt;VisualState x:Name="NoUpdatesState"/&gt;
              &lt;VisualState x:Name="UpdatesAvailableState"&gt;
                  &lt;Storyboard&gt;
                      &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Toast"&gt;
                          &lt;EasingDoubleKeyFrame KeyTime="0" Value="0"/&gt;
                      &lt;/DoubleAnimationUsingKeyFrames&gt;
                  &lt;/Storyboard&gt;
              &lt;/VisualState&gt;
          &lt;/VisualStateGroup&gt;
      &lt;/VisualStateManager.VisualStateGroups&gt;
      &lt;Border x:Name="Toast" Background="#FFFFFBE9" CornerRadius="0,0,20,0" BorderBrush="#FFFFD100" BorderThickness="0,0,2,2" RenderTransformOrigin="0.5,0.5"&gt;
          &lt;Border.RenderTransform&gt;
              &lt;TransformGroup&gt;
                  &lt;ScaleTransform/&gt;
                  &lt;SkewTransform/&gt;
                  &lt;RotateTransform/&gt;
                  &lt;TranslateTransform Y="-75"/&gt;
              &lt;/TransformGroup&gt;
          &lt;/Border.RenderTransform&gt;
              &lt;Grid Margin="15,5"&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="Auto"/&gt;
                      &lt;ColumnDefinition/&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
                  &lt;Image Source="/Namespace;component/Skins/Images/Update.png" Width="48" Height="48" Margin="0,0,15,0"/&gt;
                  &lt;TextBlock TextWrapping="Wrap" Text="Updates Available" Foreground="Black" Grid.Column="1" FontWeight="Bold" VerticalAlignment="Center" FontSize="29.333"/&gt;
              &lt;/Grid&gt;
          &lt;/Border&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>