Функция времени перехода
transition-timing-function
sm
md
lg
xl
hover
В SIMAI Framework с помощью модифкаторов можно управлять плавностью переходов CSS.
Классы
| Класс | Значение |
|---|---|
ease-linear |
transition-timing-function: linear;
|
ease-in |
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
ease-out |
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
ease-in-out |
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
Описание
Адаптивный модификатор. Задает плавность перехода в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр.
Пример
ease-in
Кнопка А
ease-out
Кнопка Б
ease-in-out
Кнопка В
<button class="transition duration-3 ease-in ...">Кнопка A</button>
<button class="transition duration-3 ease-out ...">Кнопка Б</button>
<button class="transition duration-3 ease-in-out ...">Кнопка В</button>Адаптивность
Для управления плавностью перехода, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:ease-linear для установки линейной плавности переходов для экранов размером Medium и больше.
<div class="md:ease-linear ..."></div>Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.