New to Telerik UI for Blazor? Download free 30-day trial

Remove animations of dropdowns or make them faster


Product Grid for Blazor


I want to make the animations of the Telerik dropdowns faster for fast data entry.

I don't want animations for the dropdowns to accommodate users who prefer no animations (e.g., for accessibility reasons).


You can use a CSS rule override to change the animation the Telerik dropdowns use.

You can also wrap it in a @media query to capture users who have their OS settings to prefer less animations.

/* This media query captures accessibility settings, see
@media screen and (prefers-reduced-motion: reduce) {
    .k-popup.k-reset {
        transition: none !important;
        /* to make animations faster use the following line INSTEAD */
        /* transition-duration: 100ms !important; */

A few sample components to play around with

A few sample components - play around with the CSS above and expand their dropdowns

<TelerikComboBox Data="@myComboData"
                 Placeholder="Fast animation"
                 ClearButton="true" Filterable="true">

<TelerikDropDownList Data="@myComboData"
                     DefaultText="No Animation">

<TelerikDatePicker @bind-Value="@SelectedDate"></TelerikDatePicker>

@code {

    IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
    DateTime SelectedDate { get; set; } = DateTime.Now;
    int selectedValue { get; set; }
    public class MyDdlModel
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }


A setting might be exposed at the component level for this, you can track its status here.

In this article