Правило CSS @keyframes
Правило @keyframes является основой для анимаций с ключевыми кадрами, которые используются для анимации (постепенного изменения от одного стиля к другому) множества свойств CSS. Это правило позволяет указывать, что должно происходить в определенные моменты анимации, определяя стили для ключевых кадров (или контрольных точек) вдоль последовательности анимации.
Правило @keyframes является ключевой частью спецификации CSS Animations.
За правилом @keyframes и его идентификатором следуют наборы правил (то есть правила стилей с селекторами и блоками объявлений, как в обычном коде CSS), заключенные в фигурные скобки.
Ключевые кадры в последовательности анимации
Внутри фигурных скобок селекторы ключевых кадров определяют, когда стили должны изменяться в течение последовательности анимации. Набор стилей CSS может обновляться несколько раз на протяжении всей анимации.
Селектор ключевых кадров
Блок объявления ключевых кадров включает свойства CSS и их значения. В селекторе ключевых кадров можно использовать проценты (%) или ключевые слова from (эквивалентно 0%) и to (эквивалентно 100%). 0% обозначает начало анимации, а 100% — конец.
Вендорные префиксы
Правило @keyframes полностью поддерживается всеми современными браузерами без необходимости использования вендорных префиксов. Устаревшие префиксы (такие как -webkit- или -moz-) больше не требуются.
Синтаксис
Синтаксис правила CSS @keyframes
@keyframes animationname {keyframes-selector {css-styles;}}Использование @keyframes в качестве ключевого слова
Правило @keyframes состоит из ключевого слова @keyframes, за которым следует идентификатор (выбирается разработчиком), определяющий анимацию. Чтобы привязать анимацию к элементу, этот идентификатор используется в качестве значения для свойства animation-name.
Как это выглядит:
Как определить анимацию и применить ее к элементу
/* define the animation */
@keyframes your-animation-name {
/* style rules */
}
/* apply it to an element */
.element {
animation-name: your-animation-name;
/* OR using the animation shorthand property */
animation: your-animation-name 1s …;
}Пример правила @keyframes со свойством background-color:
Пример правила CSS @keyframes
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
padding: 50px;
animation: backgrounds 4s infinite;
}
@keyframes backgrounds {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #cccccc;
}
}
</style>
</head>
<body>
<h2>@keyframes example</h2>
<div class="element">The background of this text is animated.</div>
</body>
</html>В этом примере мы анимируем свойство background-color. Сначала мы задаем идентификатор для анимации: backgrounds. Затем мы устанавливаем селекторы ключевых кадров (0%, 50% и 100%) и определяем значения для свойства: зеленый, синий и серый. Это означает, что в начальной точке (0%) цвет фона будет светло-зеленым, пока анимация не достигнет следующего ключевого кадра (50%). В середине последовательности анимации фон станет светло-синим, а в конечной точке (100%) — серым.
Пример правила @keyframes:
Пример правила CSS @keyframes со значением infinite
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 10px;
height: 100px;
background: red;
border-radius: 50%;
position: relative;
animation: element 4s infinite;
}
@keyframes element {
0% {
top: 0px;
background: #1c87c9;
width: 100px;
}
100% {
top: 200px;
background: #8ebf42;
width: 150px;
}
}
</style>
</head>
<body>
<h2>@keyframes rule example</h2>
<div></div>
</body>
</html>Пример использования правила @keyframes для создания падающего изображения:
Пример правила CSS @keyframes со свойством transform
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
height: 90%;
}
.container {
margin: 30px auto;
min-width: 320px;
max-width: 600px;
height: 90%;
overflow: hidden;
}
img {
transform-origin: left center;
animation: fall 5s infinite;
}
@keyframes fall {
from {
transform: rotate(0) translateX(0);
opacity: 1;
}
to {
transform: rotate(90deg) translateX(200px);
opacity: 0.1;
}
}
</style>
</head>
<body>
<h2>@keyframes example</h2>
<div class="container">
<img src="https://ru.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs" width="150" height="50" />
</div>
</body>
</html>Компоненты синтаксиса
| Компонент | Описание |
|---|---|
identifier | Задает имя анимации. Обязательно. |
keyframe-selector | Задает процент длительности анимации. Принимает значения от 0% до 100%, from (0%) или to (100%). Обязательно. |
declaration-block | Содержит свойства CSS и значения, которые применяются в каждом ключевом кадре. Обязательно. |
Практика
Что верно относительно ключевых кадров CSS?