Animation with semi-transparent colours has strange effect - wpf

Question

I was working with some simple animations, when I noticed a strange effect when moving the mouse over a button. The colour of the background seemed to get dark and then lighten again, yet the animation code did not make it do that. Here is a stripped down version of the code that demonstrated this bizarre effect:
<Window x:Class="WpfApp1.MainWindow"
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"
Title="MainWindow" Height="950" Width="800">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Padding" Value="16,3,16,5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="Border" Background="White" BorderBrush="#33323232" Height="{TemplateBinding Height}" MinWidth="{TemplateBinding MinWidth}" BorderThickness="2" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<ContentPresenter Name="ContentPresenter" ContentSource="Content" TextElement.FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard DecelerationRatio="0.75">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" BeginTime="0:0:0" Duration="0:0:2" To="#1A323232" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard DecelerationRatio="0.75">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" BeginTime="0:0:0" Duration="0:0:2" From="#1A323232" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" Height="32" Content="Click me" />
</Window>
Note that I slowed the animation right down in this example, to make this weird effect clearer for you. After experimenting, I discovered that if I use a darker colour to animate to, then the animation would go straight to that colour (work properly). I also noticed that if I set the alpha channel to 1 (FF), the problem also disappears. Try replacing the animations in the example above with these two:
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background.Color"
BeginTime="0:0:0" Duration="0:0:2" To="#EAEAEA" />
...
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background.Color"
BeginTime="0:0:0" Duration="0:0:2" From="#EAEAEA" />
Now, you should see the desired effect. This is what I had to do in the end, but I really wanted to use the semi-transparent colours instead. So, my question is does anybody know what is going wrong when animating with semi-transparent colours and how do I fix it?

Answer 1

When you animate an opaque white towards an increasingly transparent gray or black, the color first becomes increasingly gray, but at a certain point the white background starts to shine through more and more, so that finally (at #00000000) only the white background remains.
The effect is not so strange when you try this:
<StackPanel Background="White">
<Rectangle Width="100" Height="20" Fill="#ffff"/>
<Rectangle Width="100" Height="20" Fill="#eeee"/>
<Rectangle Width="100" Height="20" Fill="#dddd"/>
<Rectangle Width="100" Height="20" Fill="#cccc"/>
<Rectangle Width="100" Height="20" Fill="#bbbb"/>
<Rectangle Width="100" Height="20" Fill="#aaaa"/>
<Rectangle Width="100" Height="20" Fill="#9999"/>
<Rectangle Width="100" Height="20" Fill="#8888"/>
<Rectangle Width="100" Height="20" Fill="#7777"/>
<Rectangle Width="100" Height="20" Fill="#6666"/>
<Rectangle Width="100" Height="20" Fill="#5555"/>
<Rectangle Width="100" Height="20" Fill="#4444"/>
<Rectangle Width="100" Height="20" Fill="#3333"/>
<Rectangle Width="100" Height="20" Fill="#2222"/>
<Rectangle Width="100" Height="20" Fill="#1111"/>
</StackPanel>
which creates this output:
It looks entirely different on a black background: