Выбор ответа Junior Анимации обновлено
Почему элемент возвращается после анимации
Вопрос
Блок плавно появляется, но после конца анимации снова становится прозрачным. Что исправит поведение?
@keyframes appear {
from { opacity: 0; }
to { opacity: 1; }
}
.box {
opacity: 0;
animation: appear 300ms ease-out;
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Добавить animation-fill-mode: forwards. После окончания анимации её стили перестают действовать, и элемент берёт обычное значение opacity: 0. animation-fill-mode: forwards оставляет состояние последнего кадра. infinite заставит анимацию повторяться бесконечно, а не застыть.
Варианты ответа
- Добавить
animation-iteration-count: infinite - Добавить
animation-fill-mode: forwardsправильный ответ - Заменить
ease-outнаlinear - Добавить
will-change: opacity
Разбор
После окончания анимации её стили перестают действовать, и элемент берёт обычное значение opacity: 0. animation-fill-mode: forwards оставляет состояние последнего кадра. infinite заставит анимацию повторяться бесконечно, а не застыть. Функция времени влияет только на темп. will-change лишь подсказка для оптимизации и на итоговое значение не влияет.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Предыдущий вопрос
Какие свойства анимировать дёшево
Следующий вопрос
Анимация раскрытия до height: auto