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

Remove DropDown Animations or Make Them Faster


Product UI for Blazor


This knowledge base article discusses the following scenarios:

  • How to make the animations of the Telerik dropdowns faster for fast data entry?
  • How to remove all animations for Telerik Blazor ComboBox, DropDownList, DateTimePicker and other selection components?
  • I want to remove 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 or disable the animation of the Telerik dropdowns.

Disable Telerik Blazor dropdown animations

<TelerikComboBox Data="@DropDownData"

<TelerikDropDownList Data="@DropDownData"

<TelerikDatePicker @bind-Value="@SelectedDate"

    /* up to version 3.5.0 */

    /* from version 3.6.0 */
    .k-child-animation-container {
        transition: none !important;

        /* to make dropdown animations faster use the following style INSTEAD */
        /* transition-duration: 100ms !important; */

@code {
    private IEnumerable<DropDownModel> DropDownData = Enumerable.Range(1, 20)
        .Select(x => new DropDownModel { Id = x, Text = $"Item {x}" });

    private int SelectedValue { get; set; }

    private DateTime SelectedDate { get; set; } = DateTime.Now;

    public class DropDownModel
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;

You can also wrap the custom CSS in a @media query to capture users who have configured their devices to display fewer animations.

CSS that targets disabled animations (motion) in the device accessibility settings

/* This media query captures accessibility settings, see
@media screen and (prefers-reduced-motion: reduce) {
    .k-child-animation-container {
        transition: none !important;


A setting might be exposed at component level for this in the future. You can track its status at Modify default values of animations.

In this article