Продолжительность перехода
transition-duration
sm
md
lg
xl
hover
В SIMAI Framework с помощью модифкаторов можно управлять длительностью переходов свойств CSS.
Классы
| Класс | Значение |
|---|---|
duration-0 |
transition-duration: 0s;
|
duration-1 |
transition-duration: 75ms;
|
duration-2 |
transition-duration: 100ms;
|
duration-3 |
transition-duration: 150ms;
|
duration-4 |
transition-duration: 200ms;
|
duration-5 |
transition-duration: 300ms;
|
duration-6 |
transition-duration: 500ms;
|
duration-7 |
transition-duration: 700ms;
|
duration-8 |
transition-duration: 1s;
|
duration-9 |
transition-duration: 2s;
|
Описание
Адаптивный модификатор. Задает длительность перехода в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр.
Пример
duration-3
Кнопка А
duration-5
Кнопка Б
duration-7
Кнопка В
<button class="transition duration-3 ease-in-out ...">Кнопка A</button>Адаптивность
Для управления длительностью перехода, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:duration-3 для установки длительности переходов в 150ms для экранов размером Medium и больше.
<div class="md:duration-3 ..."></div>Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.