With the code below, the control flickers whenever the image is changed for MouseOver/MousePressed? I am using Storyboard and Double animation.The image display is very smooth with WPF Triggers but not with Storyboard. Can anyone help me to fix this issue?

<Style TargetType="{x:Type local:ButtonControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ButtonControl}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                <Storyboard>
                                        <DoubleAnimation 
                                            Duration="00:00:00.20"
                                            Storyboard.TargetName="imgNormal"
                                            Storyboard.TargetProperty="Opacity" To="1" />
                                </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                <Storyboard>
                                        <DoubleAnimation 
                                            Duration="00:00:00.20"
                                            Storyboard.TargetName="imgOver"
                                            Storyboard.TargetProperty="Opacity" To="1" />
                                </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                <Storyboard>
                                        <DoubleAnimation 
                                            Duration="00:00:00.20"
                                            Storyboard.TargetName="imgDisable" 
                                            Storyboard.TargetProperty="Opacity" To="1" />
                                </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                <Storyboard>
                                        <DoubleAnimation 
                                            Duration="00:00:00.20"
                                            Storyboard.TargetName="imgPress" 
                                            Storyboard.TargetProperty="Opacity" To="1" />
                                </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid>
                            <Border x:Name="imgNormal" Opacity="0">
                                <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NormalImage}" Stretch="UniformToFill"/>
                            </Border>
                        </Grid>
                        <Grid>
                            <Border x:Name="imgOver" Opacity="0">
                                 <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseOverImage}" Stretch="UniformToFill"/>
                            </Border>
                        </Grid>
                        <Grid>
                            <Border x:Name="imgDisable" Opacity="0">
                                <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisableImage}" Stretch="UniformToFill"/>
                            </Border>
                        </Grid>
                        <Grid>
                            <Border x:Name="imgPress" Opacity="0">
                                <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MousePressImage}"  Stretch="UniformToFill"/>
                            </Border>
                        </Grid>
                    </Grid>
                </ControlTemplate>
        </Setter.Value>
    </Setter>
    </Style>