Why when the same animation starts before the previous one finished the fade off does not work?

Question

I have the following simple animation:

<Window x:Class="AnimationTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel Background="Black">
        <TextBox Name="Box" >

        </TextBox>
        <TextBlock Text="{Binding Text, ElementName=Box, NotifyOnTargetUpdated=True}"  Foreground="White" >
            <TextBlock.Style>
                <Style TargetType="TextBlock"  >
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Binding.TargetUpdated">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation AutoReverse="True" To="#A933FF" Duration="0:0:1" Storyboard.TargetProperty="Foreground.Color" FillBehavior="Stop" IsCumulative="True" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </StackPanel>
</Window>

It just makes flash a value when the value changes. if you write a letter you see it flash correctly to the color set in the animation and go back. But if you click several times the duration is longer (which is the desired behavior) but then it goes to the original color without fading out. Why does this happen and how to avoid it?

Answer 1

So once again, we have a question where a user provides some code and says why is this happening? The answer in this case is the normal answer to these questions:

You wrote some code to make it happen

So to dig a little deeper, you have asked:

if you write a letter you see it flash correctly to the color set in the animation and go back. But if you click several times the duration is longer (which is the desired behavior) but then it goes to the original color without fading out. Why does this happen and how to avoid it?

First, why does this happen?

So the reason why it is happening is because you declared a ColorAnimation that has no From value set, so it will always start from the current value, whether this value has been manipulated by an Animation or not:

<ColorAnimation AutoReverse="True" To="#A933FF" Duration="0:0:1" FillBehavior="Stop" 
    Storyboard.TargetProperty="Foreground.Color" IsCumulative="True" />

For a single character entered, you'll see the ColorAnimation as you expected. However, when you continually type further characters, it will already have reached your set purple colour and you won't see any further animations until you stop typing, because it is now trying to animate from your purple colour to the same purple colour.

Now, how to avoid it?

To fix this issue, either supply a From colour, or set the Duration to be much quicker, or preferably both:

<ColorAnimation AutoReverse="True" From="White" To="#A933FF" Duration="0:0:0.1" 
    Storyboard.TargetProperty="Foreground.Color" FillBehavior="Stop" 
    IsCumulative="True" />