📚 А вы знали, что существуют разные свойства анимации в CSS? Свойство animation, как можно догадаться по названию, используется для создания анимации и определяет набор ключевых кадров. С помощью него можно задавать движение, изменение цвета, повороты, изменение размера на веб-страницах. Transition служит для создания плавных переходов между двумя состояниями элемента, делая анимацию более естественной и приятной для глаз. В данном примере мы применим плавный переход цвета фона (background-color) для элемента p при наведении курсора. Фон плавно изменится за секунду. p { background-color: blue; transition: background-color 1s ease-in-out; } p:hover { background-color: red; } Ну а благодаря свойству transform вы сможете вращать, масштабировать, перемещать и наклонять элементы, а также применять сложные преобразования с помощью матриц. Код со свойством rotate повернёт элемент вокруг его центра на 20 градусов по часовой стрелке. div { transform: rotate(20deg); } Подробнее прочитать про каждое свойство вы можете в подборке наших статей по ссылкам ниже. Animation — https://tml.io/animation58t Transition — https://tml.io/transition58t Transform — https://tml.io/transform58t #htmlacademy_полезное

👩‍💻 CSS свойство animation-composition Как я раньше не слышал о свойстве 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