Функции сглаживания: ease, linear, cubic-bezier
Управляйте кривой скорости переходов с помощью встроенных ключевых слов и функций cubic-bezier().
«Функции сглаживания: ease, linear, cubic-bezier» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое функция плавности
Функция плавности управляет кривой скорости перехода или анимации — тем, насколько быстро они ускоряются или замедляются за время выполнения.
Линейная функция
linear поддерживает постоянную скорость на протяжении всего перехода. Она полезна для индикаторов загрузки и выполнения, где ожидается равномерное движение.
<div class="progress-track"><div class="progress"></div></div>Плавность по умолчанию
ease начинается быстро, а затем замедляется к концу. Это значение используется по умолчанию и естественно выглядит в большинстве переходов интерфейса.
Плавность с ускорением
ease-in начинается медленно и ускоряется. Она хорошо подходит для элементов, покидающих экран, то есть для анимаций выхода.
<div class="modal">Open</div>
<div class="modal closing">Closing (faded to invisible)</div>Плавность с замедлением
ease-out начинается быстро и замедляется. Она отлично подходит для элементов, появляющихся на экране: они энергично входят и плавно останавливаются.
<div class="modal opening">Modal content</div>Плавность с ускорением и замедлением
ease-in-out начинается и заканчивается медленно, а в середине движение ускоряется. Лучше всего подходит для циклических анимаций или анимаций с движением туда и обратно.
Кубическая кривая Безье
Задаёт пользовательскую кубическую кривую Безье с четырьмя управляющими точками. Позволяет создавать пружиноподобные и другие пользовательские кривые плавности.
<div class="card">Card</div>Чтение значений кубической кривой Безье
Четыре значения задают две управляющие точки: cubic-bezier(x1, y1, x2, y2). Значения по оси y выше 1 создают эффекты перелёта за целевое значение, похожие на пружину. Используйте такие инструменты, как easings.net, чтобы визуализировать кривые.
Функция ступеней
steps(n, direction) делит анимацию на n отдельных равных шагов. Она идеально подходит для анимаций спрайтов и эффектов печати текста.
<div class="sprite"></div>Ключевые слова направления ступеней
Второй аргумент определяет, когда выполняется шаг:
jump-start: первый шаг в момент времени 0jump-end: последний шаг в конце времени (по умолчанию)jump-both: шаги и в начале, и в концеjump-none: шагов ни в начале, ни в конце
Современный подход: линейная функция для сложных кривых
Новая функция linear() позволяет задавать произвольные кривые плавности через несколько точек, создавая эффекты пружины и отскока в чистом CSS без ограничений cubic-bezier.
<div class="spring">Spring easing</div>Быстрая проверка
Какая функция плавности поддерживает постоянную скорость на протяжении всего перехода?
Итоги
Функции плавности управляют кривыми скорости анимации. Встроенные варианты: linear, ease, ease-in, ease-out, ease-in-out. Для пользовательских кривых используется cubic-bezier(). Дискретные шаги задаются с помощью steps(). Новая функция linear() позволяет создавать сложные кривые, похожие на движение пружины.
Часто задаваемые вопросы
Урок «Функции сглаживания: ease, linear, cubic-bezier» бесплатный?
Да — полный текст урока «Функции сглаживания: ease, linear, cubic-bezier» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Функции сглаживания: ease, linear, cubic-bezier»?
Управляйте кривой скорости переходов с помощью встроенных ключевых слов и функций cubic-bezier(). Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Функции сглаживания: ease, linear, cubic-bezier»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Длительность и время перехода свойства
- Функции сглаживания: ease, linear, cubic-bezier
- Переход нескольких свойств
- Производительность: трансформируемые свойства и перерисовка