Вводное руководство по переходам CSS

CSS-переходы - это самый простой способ создать анимацию в CSS. При переходе вы изменяете значение свойства и говорите CSS медленно изменять его в соответствии с некоторыми параметрами в направлении конечного состояния.

Введение в переходы CSS

CSS-переходы - это самый простой способ создать анимацию в CSS.

При переходе вы изменяете значение свойства и приказываете CSS медленно изменять его в соответствии с некоторыми параметрами в направлении конечного состояния.

CSS-переходы определяются этими свойствами:

Свойство Описание
transition-property свойство CSS, которое должно перейти
transition-duration продолжительность перехода
transition-timing-function функция времени, используемая анимацией (общие значения: линейная, легкость). По умолчанию: легкость
transition-delay необязательное количество секунд ожидания перед запуском анимации

Вtransitionсвойство - удобное сокращение:

.container {
  transition: property duration timing-function delay;
}

Пример перехода CSS

Этот код реализует переход CSS:

.one,
.three {
  background: rgba(142, 92, 205, 0.75);
  transition: background 1s ease-in;
}

.two, .four { background: rgba(236, 252, 100, 0.75); }

.circle:hover { background: rgba(142, 92, 205, 0.25); /* lighter */ }

См. Пример на Glitchhttps://glitch.com/edit/#!/flavio-css-transitions-example

При наведении курсора.oneи.threeэлементы, фиолетовые круги, есть анимация перехода, которая облегчает смену фона, в то время как желтые круги нет, потому что у них нетtransitionсвойство определено.

Значения функции времени перехода

transition-timing-functionпозволяет указать кривую ускорения перехода.

Вы можете использовать несколько простых значений:

Ценить
линейный
простота
легкость в
облегчение
легкость входа

Этот глюкпоказывает, как они работают на практике.

Вы можете создать полностью настраиваемую функцию времени, используякубические кривые Безье. Это довольно продвинуто, но в основном любая из перечисленных выше функций построена с использованием кривых Безье. У нас есть удобные имена, так как они распространены.

CSS-переходы в браузере DevTools

ВБраузер DevToolsпредлагают отличный способ визуализировать переходы.

Это Chrome:

Debug CSS Transitions in Chrome DevTools

Это Firefox:

Debug CSS Transitions in Firefox DevTools

С этих панелей вы можете в реальном времени редактировать переход и экспериментировать на странице, не перезагружая код.

Какие свойства можно анимировать с помощью переходов CSS

Много! Но не все свойства CSS.

Вот полный список:

Свойство
фон
фоновый цвет
background-position
размер фона
граница
цвет границы
ширина рамки
нижняя граница
граница нижнего цвета
граница-нижний-левый-радиус
граница-нижний-правый-радиус
ширина нижней границы
граница слева
граница-левый-цвет
граница-левая-ширина
border-radius
граница справа
граница-правый-цвет
граница-правая-ширина
пограничный интервал
бордюр
цвет верхней границы
граница-верх-левый-радиус
граница-верх-правый-радиус
ширина верхней границы
Нижний
тень коробки
цвет каретки
зажим
цвет
счетчик столбцов
колонна-пробел
столбец-правило
столбец-правило-цвет
ширина правила столбца
ширина колонки
столбцы
содержание
фильтр
сгибать
гибкая основа
гибкий рост
гибко-усадочный
шрифт
размер шрифта
размер шрифта настроить
font-stretch
font-weight
сетка
сетка-автоматические столбцы
сетка-автопоток
сетка-автоматические строки
конец столбца сетки
сетка-столбец-зазор
сетка-столбец-начало
сетка-столбец
сетка
конец строки сетки
сетка-ряд-промежуток
сетка-строка-начало
сетка
сетка-шаблон-области
сетка-шаблон-столбцы
сетка-шаблон-строки
сетка-шаблон
сетка
высота
оставили
Межбуквенное расстояние
высота линии
поле
нижняя граница
маржа слева
край справа
верхняя граница
максимальная высота
Максимальная ширина
мин-высота
минимальная ширина
непрозрачность
порядок
контур
контур-цвет
контур-смещение
контур-ширина
набивка
обивка-дно
отступ слева
отступ справа
обивка
перспектива
перспектива происхождения
цитаты
верно
размер табуляции
текст-украшение
текст-украшение-цвет
отступ текста
текстовая тень
верх
преобразовать.
вертикальное выравнивание
видимость
ширина
межсловный интервал
z-индекс

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: