@vaadin/vaadin-lumo-styles/src/utilities/transition.css

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

/**
 * @license
 * Copyright (c) 2000 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
.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;
}