Чтобы создать анимацию в CSS, нужно использовать селектор @keyframes
и определить, как будет изменяться стиль элемента в разных моментах времени. Далее, нужно добавить это имя анимации в свойство animation
элемента, для которого мы хотим создать анимацию.
Например, вот как можно создать анимацию мерцания цвета для элемента с классом box
:
@keyframes blink {
0% {
background-color: white;
}
50% {
background-color: yellow;
}
100% {
background-color: white;
}
}
.box {
animation: blink 1s infinite;
}
Здесь мы определили анимацию blink
, которая меняет цвет фона элемента с белого на желтый и обратно до его первоначального цвета. Свойство animation
добавляет эту анимацию к элементу с классом box
, делая его мерцанием бесконечно долго (infinite
).
В CSS также есть множество других по-умолчанию доступных свойств анимации, которые вы можете использовать для создания различных анимаций, таких как transition
, transform
, opacity
и другие. С помощью этих свойств вы можете создавать анимации, которые изменяют расположение, размер, цвет и другие характеристики элементов на странице.