I have created a custom focusvisualstyle for a button control, but as soon as
it starts the ThicknessAnimation the border position gets modified to the
topleft on the page. Is this a bug in ThicknessAnimation or did I forget
something ?
I've added the property BeginTime="0:0:2" to the ThicknessAnimation so it is
clear that the ThicknessAnimation causes the problem.

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>

<Style x:Key="CustomFocusVisualStyle" TargetType="{x:Type Control}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>

<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Control.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetName="OuterBorder"
Storyboard.TargetProperty="BorderThickness" From="5" To="2" BeginTime="0:0:2"
Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="OuterBorder"
Storyboard.TargetProperty="Opacity" To=".5" Duration="0:0:.5"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>

<Grid>
<Border x:Name="OuterBorder" CornerRadius="1"
BorderThickness="5" Margin="1">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0.0,0.0" EndPoint="1.0,1.0">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="Red"/>
<GradientStop Offset="0.5" Color="Orange"/>
<GradientStop Offset="1.0" Color="Green"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="OuterBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
From="Red" By="Orange" To="Green" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
<ColorAnimation
Storyboard.TargetName="OuterBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)"
From="Green" By="Orange" To="Red" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Border.Triggers>
<Border.RenderTransform>
<ScaleTransform CenterX="100" CenterY="25"
ScaleX="1" ScaleY="1"/>
</Border.RenderTransform>
</Border>
</Grid>

</ControlTemplate>
</Setter.Value>
</Setter>
</Style>



<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Width" Value="200"/>
<Setter Property="Height" Value="50"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource
CustomFocusVisualStyle}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="LightYellow"/>
<GradientStop Offset="1.0" Color="Gold"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="LightGoldenrodYellow"/>
<GradientStop Offset="1.0" Color="Goldenrod"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Page.Resources>

<StackPanel>
<Button Style="{StaticResource ButtonStyle}" Content="Button one"/>
<Button Style="{StaticResource ButtonStyle}" Content="Button two"/>
<Button Style="{StaticResource ButtonStyle}" Content="Button three"/>
<Button Width="200" Height="50" Margin="10" Content="Button four"/>
</StackPanel>

</Page>