Avalonia UI Animation Button Hovering and Leaving

Question

I am currently creating this dashboard and I've added these buttons. I've also added animation to the button in which when the user hovers on it the text inside the button will gradually increase, this code works just fine

<Button Grid.Column="1" Background="Transparent" Content="Manage User" Foreground="White"  Margin="0,10,0,0" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited" >
                <Button.Styles>
                    <Style Selector="Button:pointerover" >
                        <Style.Animations>
                            <Animation Duration="0:0:0.2">
                                <KeyFrame Cue="100%">
                                    <Setter Property="FontSize" Value="30">
                               
                                    </Setter>
                                </KeyFrame>
                            </Animation>
                        </Style.Animations>
                    </Style>
                </Button.Styles>
</Button>

But i don't know how to return the button inside the text to its' original size once the user removes the cursor on the button and i want to make the text return to its original size gradually as well. Thank you so much!

Answer 1

You need to use transition animations instead of keyframes. This code works just fine:

<Button Content="Manage User">
    <Button.Styles>
        <Style Selector="Button">
            <Setter Property="FontSize" Value="14" />
        </Style>
        <Style Selector="Button:pointerover">
            <Setter Property="FontSize" Value="30" />
        </Style>
    </Button.Styles>
    <Button.Transitions>
        <Transitions>
            <DoubleTransition Property="FontSize" Duration="0:0:0.2" />
        </Transitions>
    </Button.Transitions>
</Button>

Hope it helps!