Длительность и время перехода свойства
Определяйте, какие свойства переходят, сколько это занимает и когда начинается переход, с помощью задержки.
«Длительность и время перехода свойства» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое переход CSS
Переход CSS вычисляет промежуточные значения между двумя значениями свойства за указанную длительность, когда значение изменяется, например при наведении. JavaScript не требуется.
Свойство перехода
Определяет, какие свойства CSS нужно анимировать. Используйте all, чтобы применить переход ко всем анимируемым свойствам, или перечислите конкретные свойства.
<button>Save changes</button>Длительность перехода
Задаёт продолжительность перехода. Принимает значения времени в секундах (s) или миллисекундах (ms).
<div class="card">Card</div>Сокращённая запись перехода
Объединяет все четыре подчинённых свойства перехода: свойство | длительность | функция плавности | задержка.
<button class="btn">Submit</button>Несколько переходов
Перечисляйте несколько переходов через запятую, чтобы независимо анимировать разные свойства:
<div class="card">Card</div>Задержка перехода
Откладывает начало перехода. Это полезно для упорядочивания анимаций или для того, чтобы один переход завершился до начала другого.
<nav>
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Contact</a>
</nav>Переход в исходном состоянии
Всегда размещайте свойство transition в исходном состоянии, а не в состоянии наведения. Это гарантирует выполнение перехода как при начале наведения, так и при его завершении.
<button class="btn demo-active">Hover me</button>Какие свойства можно изменять переходом
Большинство числовых свойств CSS можно изменять переходом: цвета, размеры, прозрачность, преобразования и другие. Дискретные свойства, например display, нельзя плавно интерполировать — они переключаются скачком.
Предупреждение о переходе всех свойств
Использование transition: all может вызвать неожиданные анимации свойств, которые вы не собирались анимировать. В рабочем коде всегда указывайте свойства явно.
Переходы цветов
При переходах цветов вычисляются промежуточные значения между ними. Для наилучшего результата используйте один и тот же формат цвета:
<button class="btn demo-active">Hover me</button>Переходы и избыточные перерасчёты макета
Для повышения производительности избегайте переходов свойств, запускающих перерасчёт макета, например width, height, margin и padding. Они вызывают перерасчёт макета на каждом кадре анимации. Вместо них используйте transform и opacity.
Быстрая проверка
Где следует разместить свойство transition, чтобы оно выполнялось и при начале, и при завершении наведения?
Итоги
Переходы CSS плавно изменяют свойства с течением времени с помощью transition-property, duration, timing-function и delay. Размещайте переходы в исходном состоянии для двунаправленной анимации. Для производительности и предсказуемости предпочитайте списки конкретных свойств значению all.
Часто задаваемые вопросы
Урок «Длительность и время перехода свойства» бесплатный?
Да — полный текст урока «Длительность и время перехода свойства» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Длительность и время перехода свойства»?
Определяйте, какие свойства переходят, сколько это занимает и когда начинается переход, с помощью задержки. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Длительность и время перехода свойства»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Длительность и время перехода свойства
- Функции сглаживания: ease, linear, cubic-bezier
- Переход нескольких свойств
- Производительность: трансформируемые свойства и перерисовка