Why doesn't the ColorAnimation for Checked state stay in color after the MouseOver state starts?

I am having a problem with the one I created ControlTemplatefor ToggleButton.

When the button Checkedstarts ColorAnimation, the control background changes color. However, if the user enters the state MouseOver, another animation starts, which also affects the background of the button.

When the mouse is no longer in state MouseOver, the control does not return to the color that should be when it is in state Checked. I am not sure why this is not saved when the state starts MouseOver.

Part of VisualStateManagermine ControlTemplatelooks something 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>