Переходы и анимация
Утилиты для управления тем, какие CSS-свойства анимируются при переходах.
| Class | Styles |
|---|---|
transition | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-all | transition-property: all;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-colors | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-opacity | transition-property: opacity;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-shadow | transition-property: box-shadow;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-transform | transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-none | transition-property: none; |
transition-(<custom-property>) | transition-property: var(<custom-property>);
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-[<value>] | transition-property: <value>;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
Используйте утилиты типа transition и transition-colors, чтобы указать, какие свойства должны анимироваться при их изменении:
Наведите курсор на кнопку, чтобы увидеть ожидаемое поведение
<button class="bg-blue-500 transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 ..."> Сохранить изменения</button>В ситуациях, когда пользователь указал, что предпочитает уменьшенное движение, вы можете условно применять анимации и переходы с помощью вариантов motion-safe и motion-reduce:
<button class="transform transition hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none ..."> <!-- ... --></button>Используйте синтаксис transition-[<value>] , чтобы задать transition properties на основе полностью пользовательского значения:
<button class="transition-[height] ..."> <!-- ... --></button>Для переменных CSS вы также можете использовать синтаксис: transition-(<custom-property>)
<button class="transition-(--my-properties) ..."> <!-- ... --></button>Это просто сокращение, transition-[var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a transition-property утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<button class="transition-none md:transition-all ..."> <!-- ... --></button>Подробнее об использовании вариантов читайте в документации по вариантам.