@vaadin/vaadin-lumo-styles/utilities/transition.js

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2017 - 2025 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';

export const transition = css`
  .transition {
    transition-property: -webkit-backdrop-filter, backdrop-filter, background-color, border-color, box-shadow, color,
      fill, filter, opacity, rotate, scale, stroke, text-decoration-color, transform, translate;
    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: var(--lumo-utility-transition-duration, 150ms);
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: var(--lumo-utility-transition-duration, 150ms);
  }

  .transition-colors {
    transition-property: background-color, border-color, color, fill, stroke, text-decoration-color;
    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: var(--lumo-utility-transition-duration, 150ms);
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: var(--lumo-utility-transition-duration, 150ms);
  }

  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: var(--lumo-utility-transition-duration, 150ms);
  }

  .transition-transform {
    transition-property: rotate, scale, transform, translate;
    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: var(--lumo-utility-transition-duration, 150ms);
  }

  .transition-none {
    transition-property: none;
  }
`;