Карточка Junior Анимации спрашивают часто обновлено
transition и animation
Вопрос
Чем transition отличается от animation?
Попробуйте сами
Ответьте про себя или вслух, потом откройте ответ и сверьтесь.
Показать ответ и разбор
Коротко
transition плавно переводит свойство из старого значения в новое и срабатывает только при смене значения. animation проигрывает кадры @keyframes сама, умеет повторы, направление, паузу и промежуточные шаги.
Ответ
transition плавно переводит свойство из старого значения в новое и срабатывает только при смене значения. animation проигрывает кадры @keyframes сама, умеет повторы, направление, паузу и промежуточные шаги.
Разбор
Переход нужен для реакции на состояние (hover, класс), анимация для самостоятельного движения (лоадер, пульсация).
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Термины по теме
Ещё по теме «Анимации»
- Web Animations API
- Какие свойства анимировать дёшево
- Почему элемент возвращается после анимации
- Анимация раскрытия до height: auto
- requestAnimationFrame против setInterval
- Как учесть настройку «уменьшить движение»
- Два времени в шортхенде transition
- CSS-анимация или JavaScript