Найти тему
16,9 тыс подписчиков

📚 А вы знали, что существуют разные свойства анимации в 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_полезное
Около минуты