«ease» — это одна из функций временных функций (timing-function) анимации, доступных в CSS. Она определяет, как будет изменяться скорость анимации во время её выполнения.
Функции временных функций (timing-function) задают изменение скорости анимации от начала до конца. Они определяют степень, с которой анимация переходит от одного стиля (начального) к другому (конечному).
Функция ease позволяет создавать более естественное и плавное изменение в скорости анимации. Она является наиболее популярной функцией и рекомендуется в большинстве случаев, так как плавно замедляет анимацию в начале и в конце, что создает впечатление мягкого перехода.
Функция ease имеет следующее математическое выражение:
ease(t) = (cubic-bezier(0.25, 0.1, 0.25, 1))Она задает анимацию, которая начинается медленно, ускоряется в середине анимации, а затем замедляется к концу анимации.
Функция ease может быть использована как для transition-анимаций, так и для анимаций с ключевыми кадрами.
Например, для transition-анимации цвета фона можно использовать такой код:
div {
background-color: blue;
transition-property: background-color;
transition-duration: 2s;
transition-timing-function: ease;
}
div:hover {
background-color: red;
}В этом примере элемент div изменяет свой цвет фона при наведении курсора мыши на него, используя transition-анимацию. Свойство transition-timing-function задает функцию временной функции «ease», что позволяет создать плавный эффект перехода цвета фона.
