Wpf Visual transitions not working as intended - wpf

Question

I am trying to create a custom button using a template.
I have written this template:
<Style TargetType="Button" x:Key="Delete Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition To="MouseOver"
GeneratedDuration="0:0:1"/>
<VisualTransition To="Pressed"
GeneratedDuration="0:0:1"/>
<VisualTransition From="Presse To="MouseOver"
GeneratedDuration="0:0:1"/>
<VisualTransition To="Normal"
GeneratedDuration="0:0:1"/>
<VisualTransition To="Disabled"
GeneratedDuration="0:0:0.1"/>
<VisualTransition From="Disabled"
GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="VisPres"
Storyboard.TargetProperty="Stroke.Color"
To="PaleVioletRed"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="VisPres"
Storyboard.TargetProperty="Fill.Color"
To="DarkRed">
</ColorAnimation>
<ColorAnimation Storyboard.TargetName="VisPres"
Storyboard.TargetProperty="Stroke.Color"
To="Red"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Storyboard.TargetName="VisPres"
Storyboard.TargetProperty="Fill.Color"
To="Gray"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="VisPres" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="Red"
Stroke="Black" StrokeThickness="4">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="4,4,4,4"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The template looks fine, but all the animation transitions take 1 seond, even though I stated they should take different times in the visualtransition.
can anyone help me please?
thank you very much!
Edit: here is another template on which even increasing times won't work
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition To="MouseOver"
GeneratedDuration="0:0:0.2"/>
<VisualTransition To="Pressed"
GeneratedDuration="0:0:0.01"/>
<VisualTransition From="Pressed" To="MouseOver"
GeneratedDuration="0:0:0.01"/>
<VisualTransition To="Normal"
GeneratedDuration="0:0:2"/>
<VisualTransition To="Disabled"
GeneratedDuration="0:0:0"/>
<VisualTransition From="Disabled" To="Normal"
GeneratedDuration="0:0:2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="LightCol"
Storyboard.TargetProperty="Color"
To="#BCFF8E"/>
<ColorAnimation Storyboard.TargetName="ShadCol"
Storyboard.TargetProperty="Color"
To="#A1CC84"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="LightCol"
Storyboard.TargetProperty="Color"
To="#72E324"/>
<ColorAnimation Storyboard.TargetName="ShadCol"
Storyboard.TargetProperty="Color"
To="#6CBF32"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Storyboard.TargetName="LightCol"
Storyboard.TargetProperty="Color"
To="Gray"/>
<ColorAnimation Storyboard.TargetName="ShadCol"
Storyboard.TargetProperty="Color"
To="Gray"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<ThicknessAnimation Storyboard.TargetName="Bord"
Storyboard.TargetProperty="BorderThickness"
To="2"
Duration="0:0:0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Bord" BorderBrush="Blue" BorderThickness="0">
<Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop x:Name="LightCol" Color="#D7FFBC" Offset="0.499"/>
<GradientStop x:Name="ShadCol" Color="#D5E5CA" Offset="0.501"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="4,4,4,4"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>