AnimateExample2.razor

@namespace MudExtensions.Docs.Examples
@using MudBlazor.Interfaces
@using MudExtensions.Utilities

<MudAnimate @ref="_animate" Selector=".id2" Duration="1" AnimationType="AnimationType.Rotate" Value="_value2" ValueSecondary="0" Infinite="true"
            KeyframeAdvanced="@KeyframeBuilder.Build(2, new List<string>() {"0", $"{_value2}"}, string.Join(" ", _animationTypes))" />

<MudGrid>
    <MudItem xs="12" sm="8">
        <div class="d-flex align-center justify-center ma-0" style="height:400px;">
            <MudPaper Class="id2 d-flex align-center justify-center" Elevation="0" Height="200px" Width="200px" Style="background-color: blue">
                <MudText Class="white-text" Typo="Typo.h1" Style="outline: none;">A</MudText>
            </MudPaper>
        </div>
    </MudItem>

    <MudItem xs="12" sm="4">
        <MudStack Spacing="4">
            <MudSelectExtended @bind-SelectedValues="_animationTypes" Variant="Variant.Outlined" Color="Color.Secondary" Label="Type" MultiSelection="true" Margin="Margin.Dense" Dense="true" AnchorOrigin="Origin.BottomCenter">
                <MudSelectItemExtended Value="KeyframePreset.Rotate" Text="Rotate">Rotate</MudSelectItemExtended>
                <MudSelectItemExtended Value="KeyframePreset.Fade" Text="Fade">Fade</MudSelectItemExtended>
                <MudSelectItemExtended Value="KeyframePreset.Blur" Text="Blur">Blur</MudSelectItemExtended>
            </MudSelectExtended>
            <MudNumericField @bind-Value="_value2" Variant="Variant.Outlined" Label="Value" Margin="Margin.Dense" />
        </MudStack>
    </MudItem>
</MudGrid>

@code {
    MudAnimate? _animate = new();
    IEnumerable<string> _animationTypes = new List<string>();
    double _value2 = 360;
}