Why is the ColorAnimation for Checked state not persisting color after the MouseOver state is triggered?

Question

I encountered an issue with a ControlTemplate for ToggleButton I created.

When the button is Checked, a ColorAnimation is triggered and the control's background changes color. However, if the user enters the MouseOver state, another animation is triggered that affects the button's background as well.

When the mouse is no longer in the MouseOver state, the control does not return to the color it should be while it is in the Checked state. I'm not sure why this does not persist when the MouseOver state is triggered.

The VisualStateManager portion of my ControlTemplate looks sorta like this:

<VisualStateManger.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal"></VisualState>
        <VisualState x:Name="MouseOver">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="BackgroundBorder"
                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                    To="Gold" Duration="0:0:0.3" />
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
    <VisualStateGroup x:Name="CheckedStates">
        <VisualState x:Name="Checked">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="BackgroundBorder"
                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                    To="PaleGoldenrod" Duration="0:0:0.3" />
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Answer 1

My workaround for the issue I was having involved creating a Grid that enclosed the Border.

For the CommonStates I made animation changes to the Border.Background and for the CheckedStates I made animation changes to the Grid.Background.

It achieves the visual effect I was looking for.