Кратко
Секция статьи "Кратко"Чтобы связать ключевые кадры CSS-анимации с конкретным элементом, используется свойство animation
.
Пример
Секция статьи "Пример".element { animation-name: circle-to-square;}
.element { animation-name: circle-to-square; }
Как понять
Секция статьи "Как понять"Благодаря animation
браузер понимает, какие именно ключевые кадры нужно применять к выбранному элементу.
Как пишется
Секция статьи "Как пишется"В качестве значения указывается имя, заданное для ключевых кадров анимации в директиве @keyframes
.
Кроме имени анимации можно указать none
, значение по умолчанию. Означает отсутствие анимации. Удобно использовать для сброса анимации.
Например, можно указать это значение для элемента по ховеру:
.element { animation: some-animation;}.element:hover { animation: none;}
.element { animation: some-animation; } .element:hover { animation: none; }