Как я раньше не слышал о свойстве
animation-composition? Я только что заметил его в блоге Manuel Matuzović:В CSS анимацию можно компоновать тремя способами: заменять, добавлять и накапливать. Свойство animation-composition позволяет переключаться между ними.
Ха! Значит, можно эффективно добавлять, заменять или комбинировать анимации, о чем я никогда раньше не задумывался! Я даже не задумывался о стандартном поведении, заменяющем анимацию на элементе, так что в приведённом ниже CSS
.element будет перемещаться только на 100px....element {
animation: move 2s infinite;
transform: translateX(10px);
}
@keyframes move {
to {
transform: translateX(100px);
}
}Но что, если нужно сложить эти свойства, чтобы получилось
100 + 10? Для этого и существует animation-composition, и её можно использовать следующим образом:.element {
animation: move 2s infinite;
transform: translateX(10px);
animation-composition: add;
}
@keyframes move {
to {
transform: translateX(100px);
}
}Ха! Очень аккуратно!
Самое забавное, что когда я увидел это свойство сегодня утром, моей первой мыслью было: зачем нам это нужно? Я не мог представить сценариев, в которых оно помогло бы выпутаться из сложных проблем или помочь в работе с анимацией (что, признаться, случается со мной крайне редко). А потом, во второй половине дня, я работал с инженером и понял, что можно использовать эти
animation-composition штуки без написания кучи сложного JavaScript!Не забудьте также посмотреть пост Bramus'а о комбинировании нескольких анимационных эффектов.
🖥 Источник (🇬🇧)
📱 @dev_notes_ru
#css #cssanimation