@keyframes — CSS — Дока
- Кратко
- Пример
- Как понять
- Как пишется
- Подсказки
Кратко
Скопировано
Директива @keyframes используется для создания ключевых кадров CSS-анимаций.
Пример
Скопировано
@keyframes circle-to-square { from { border-radius: 50%; background-color: red; } to { border-radius: 0; background-color: blue; }}
@keyframes circle-to-square {
from {
border-radius: 50%;
background-color: red;
}
to {
border-radius: 0;
background-color: blue;
}
}
Как понять
Скопировано
Что из себя представляет любая анимация? Это переход от одного состояния элемента к другому состоянию.
Чтобы рассказать браузеру, с чего начать и чем закончить анимацию, используется директива @keyframes.
Как пишется
Скопировано
После ключевого слова @keyframes мы должны написать имя анимации. Оно понадобится нам, чтобы связать анимацию для конкретного элемента с ключевыми кадрами. Желательно, чтобы имя анимации было уникальным.
👇
Если в коде встречается несколько директив с одинаковыми именами, то будет воспроизводиться последняя, стоящая ниже по коду анимация.
Ключевые кадры могут прописываться при помощи ключевых слов from (начальный кадр) и to (конечный кадр). Это удобно, если у вас всего два ключевых кадра. Если же кадров больше двух, то можно использовать проценты.
@keyframes circle-to-square { from { border-radius: 50%; background-color: red; } 50% { border-radius: 25%; background-color: green; } to { border-radius: 0; background-color: blue; }}
@keyframes circle-to-square {
from {
border-radius: 50%;
background-color: red;
}
50% {
border-radius: 25%;
background-color: green;
}
to {
border-radius: 0;
background-color: blue;
}
}
Браузер расшифровывает ключевое слово from как 0, а ключевое слово to как 100.
Подсказки
Скопировано
💡 Задавайте уникальное имя каждой анимации.
💡 from равно 0, to равно 100.
💡 Если нужна простая анимация от исходного значения к конечному, то внутри директивы можно указать только финальный кадр.
@keyframes circle-to-square { to { border-radius: 0; background-color: blue; }}
@keyframes circle-to-square {
to {
border-radius: 0;
background-color: blue;
}
}
🦄
Подробнее об анимациях можно прочитать в статье «CSS-анимации».
Если вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
←
CSS-анимации
alt + ←
→
animation
alt + →
Правило @keyframes | CSS справочник
CSS правилаОпределение и применение
CSS правило @keyframes позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров в процессе анимации.
Чтобы использовать ключевые кадры, создается правило @keyframes с произвольным именем, которое впоследствии используется в свойстве animation-name, либо в универсальном свойстве animation для добавления списка ключевых кадров в анимацию.
Каждое правило @keyframes должно содержать список стилей для селекторов ключевых кадров, каждый из которых задаёт процент для анимации, при котором происходит ключевой кадр. Указать, когда происходит смена стиля необходимо в процентах (0% — это начало анимации, 100% — это когда анимация завершена), или с помощью ключевых слов «from» и «to», которые соответствуют, как 0% и 100%. Для корректного проигрывания анимации, ключевые кадры должны содержать начало цикла и его конец (значения 0% | from и 100% | to).
Допускается перечислять ключевые кадры в любом порядке, так как браузер их обрабатывает не в порядке размещения, а в зависимости от значения процента (от меньшего значения к большему).
Если анимация имеет те же начальные и конечные свойства, то вы можете перечислить их через запятую: 0%, 100% {}.
Если по какой-то причине вы решили включить в правило свойства, которые не могут быть анимированы, то они будут проигнорированы браузером, а свойства, которые могут быть анимированы будут включены в анимацию.
Свойства, указанные в ключевом кадре со значением !important игнорируются. Ознакомиться, как происходит отмена значимости стилей (!important) вы можете в статье «Каскадность в CSS» (раздел «Нюансы конфликтов»).
Поддержка браузерами
| Свойство | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 30.0 15.0 -webkit- | 9.0 4.0 -webkit- | 10.0 | 12.0 |
CSS синтаксис:
@keyframes animationName {
from | % {css-styles} // начало цикла
to | % {css-styles} // конец цикла
}
animationName - имя анимации
from | to | % - селектор ключевого кадра
css-styles - css стили
Значения свойства
| Значение | Описание |
|---|---|
| animationName (имя анимации) | Задаёт имя анимации. Обязательный параметр.Используется в свойстве animation-name, либо в универсальном свойстве animation. Имя анимации может состоять из латинских букв без учета регистра от A до Z, цифр от 0 до 9, знака подчеркивания (_), и/или тире (—). Первый символ должен быть буквой (то есть не должен начинаться с числа, даже если перед ним ставится тире). Два тире подряд запрещены в начале имени. Кроме того, не могут использоваться специальные зарезервированные слова, такие как none, unset, initial, или inherit в любом сочетании. |
| keyframes-selector (селектор ключевого кадра) | Процент от продолжительности анимации. Обязательный параметр. Допустимые значения: 0%-100% from (тоже самое, что 0%) to (тоже самое, что 100%) Допускается использовать множество селекторов ключевого кадра, при этом перечислять ключевые кадры возможно в любом порядке, так как браузер их обрабатывает не в порядке размещения, а в зависимости от значения процента (от меньшего значения к большему).  |
| css-styles (css стили) | Одно или несколько допустимых (анимируемых) свойств стиля CSS. Обязательный параметр. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования CSS правила @keyframes</title>
<style>
.test {
width: 75px; /* устанавливаем ширину блока */
height: 75px; /* устанавливаем высоту блока */
border-radius: 50px; /* определяем форму углов элемента */
position: relative; /* элемент с относительным позиционированием (position:static - по умолчанию и, как следствие, значение свойства left не повлияли бы на позиционирование элемента) */
-webkit-animation: iliketomoveit 5s infinite; /* для поддержки ранних версий браузеров */
animation: iliketomoveit 5s infinite; /* задаём имя анимации (соответствует имени назначенному в ключевых кадрах), продолжительность анимации и указываем, что анимация будет повторяться бесконечно */
}
@-webkit-keyframes iliketomoveit { /* для поддержки ранних версий браузеров */
0% {left: 0px;} /* задаем начало анимации */
25% {left: 400px; background: red;} /* сдвигаем элемент на 400px от левого края при этом устанавливаем цвет заднего фона */
75% {left: 200px;} /* уменьшаем сдвиг от левого края */
100% {left: 0px; background: green;} /* возвращаем элемент на первоначальную точку и изменяем цвет заднего фона */
}
@keyframes iliketomoveit {
0% {left: 0px;}
25% {left: 400px; background: red;}
75% {left: 200px;}
100% {left: 0px; background: green;}
}
</style>
</head>
<body>
<div class = "test"></div>
</body>
</html>
Пример использования CSS правила @keyframes (ключевые кадры для анимации в CSS).
CSS @keyframes Правило
❮ Назад Полное руководство по CSS Далее ❯
Пример
Постепенное перемещение элемента на 200 пикселей вниз:
@keyframes mymove
{
от {сверху: 0px;}
to {top: 200px;}
}
Попробуйте сами »
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Правило @keyframes определяет код анимации.
Анимация создается путем постепенного перехода от одного набора стилей CSS к другому.
Во время анимации можно многократно менять набор стилей CSS.
Укажите, когда произойдет изменение стиля в процентах или с ключевыми словами «от» и «to», что соответствует 0% и 100%. 0% — это начало анимации, 100% — когда анимация завершена.
Совет: Для лучшей поддержки браузера всегда следует определять селекторы 0% и 100%.
Примечание: Используйте свойства анимации для управления внешним видом анимации, а также для привязки анимации к селекторам.
Примечание: Важное правило игнорируется в ключевом кадре (см. последний пример на этой странице).
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает правило.
Числа, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.
| Собственность | |||||
|---|---|---|---|---|---|
| @ключевые кадры | 43,0 4,0 -вебкит- | 10,0 | 16,0 5,0 -мунц- | 9.0 4.0 -вебкит- | 30,0 15,0 -webkit- |
CSS Syntax
@KeyFrames AnimationName { KeyFrames-Selector { CSS-STYLE;} }
значения недвижимости
Допустимые значения:
0-100%
от (аналогично 0%)
до (аналогично 100%)
Примечание: В одной анимации может быть много селекторов ключевых кадров.
Дополнительные примеры
Пример
Добавить несколько селекторов ключевых кадров в одну анимацию:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
3
Попробуйте сами »
Пример
Изменение множества стилей CSS в одной анимации:
@keyframes mymove
{
0% {верх: 0px; фон: красный; ширина: 100 пикселей;}
100% {вверху: 200 пикселей; фон: желтый; width: 300px;}
}
Попробуйте сами »
Пример
Много селекторов ключевых кадров с множеством стилей CSS:
@keyframes mymove
{
0% {верх: 0px; слева: 0px; фон: красный;}
25% {верх: 0px; слева: 100 пикселей; фон: синий;}
50% {верх: 100 пикселей; слева: 100 пикселей; фон: желтый;}
75 % {вверху: 100 пикс.
; слева: 0px; фон: зеленый;}
100% {верх: 0px; слева: 0px; фон: красный;}
}
Попробуйте сами »
Пример
Примечание: Важное правило игнорируется в ключевом кадре:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* игнорируется
*/
to {top: 200px;}
}
Попробуйте сами »
Связанные страницы
Учебник по CSS: CSS-анимация
❮ Предыдущая Полное руководство по CSS Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTMLУчебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
900 Справочник
900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.
CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Краткое введение с примерами
CSS означает каскадные таблицы стилей.
Это язык таблиц стилей, который используется для описания внешнего вида и форматирования документа, написанного на языке разметки. Он предоставляет дополнительную функцию HTML, что делает его очень полезным. Обычно он используется с HTML для изменения стиля веб-страниц и пользовательских интерфейсов. В этой статье мы попытаемся понять важную часть CSS-анимации — ключевые кадры.
Что такое ключевые кадры CSS?
В CSS для анимации используются ключевые кадры. Это дает вам больше контроля над анимацией, которую вы хотите выполнить. Анимация создается путем постепенного перехода от одного стиля к другому. Вы можете менять стили CSS столько раз, сколько захотите.
Синтаксис:
@keyframes [имя]{
от{
[стили];
}
до{
[стили];
}
- Значение [имя] определяет имя анимации. Вы можете назвать это как угодно.
- Значение [styles] определяет свойства стиля CSS.
Имейте в виду, что на них нет селекторов. Они находятся в корне страницы CSS.
Функции синхронизации ключевых кадров
Функция синхронизации используется для управления скоростью анимации. Мы можем использовать следующие значения для лучшего понимания:
- Линейный: это означает, что переход будет постоянным от начала до конца.
- Легкость: это означает, что анимация будет начинаться медленно, а затем через некоторое время скорость будет увеличиваться, а перед концом скорость снова замедлится.
- Упрощение: очень похоже на упрощение, но анимация заканчивается быстро.
- Легкость: Очень похоже на легкость. Разница лишь в том, что он начинается быстро.
Пример ключевых кадров CSS 1
Давайте рассмотрим простой пример, чтобы понять, как работают ключевые кадры.
Здесь мы создали поле высотой и шириной 200 пикселей.
Цвет коробки красный. Создается ключевой кадр с именем «myframes», который увеличивает высоту блока до 500 пикселей.
Имя анимации указывает имя анимации, определенной @keyframes, которая должна применяться к выбранному элементу.
Продолжительность анимации указывает, сколько секунд или миллисекунд занимает анимация для завершения одного цикла анимации.
Функция синхронизации определяет, как анимация будет развиваться в течение каждого цикла, т. е. функции плавности.
Количество итераций указывает, сколько раз цикл анимации должен воспроизводиться перед остановкой.
Ключевые кадры CSS Пример 2
В этом примере. мы увидим еще один простой способ записи ключевых кадров с несколькими объявлениями стиля.
Ключевые кадры CSS Пример 3
В этом примере мы увидим несколько ключевых кадров с несколькими объявлениями стилей.
Объединить преобразование и ключевые кадры
В этом примере мы объединили ключевые кадры со свойством преобразования, чтобы создать вращающуюся рамку.