Базовая декларация и использование
@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )Для краткости остальная часть кода на этой странице не будет использовать никаких префиксов, но при использовании в реальном мире следует использовать все префиксы поставщиков, указанные выше.
Несколько шагов
@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )Если анимация имеет одинаковые начальные и конечные свойства, один из способов сделать это - разделить запятыми значения 0% и 100%:
@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )Или вы всегда можете сказать, что анимация запускается дважды (или любое четное количество раз) и указать направление alternate.
Вызов анимации по ключевым кадрам с отдельными свойствами
.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )Сокращение анимации
Просто разделите все индивидуальные значения пробелом. Порядок не имеет значения, за исключением случаев использования продолжительности и задержки, они должны быть в таком порядке. В приведенном ниже примере 1 с = продолжительность, 2 с = задержка, 3 = итерации.
animation: test 1s 2s 3 alternate backwardsКомбинируйте трансформацию и анимацию
@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )Несколько анимаций
Вы можете разделить значения запятыми, чтобы объявить несколько анимаций в селекторе.
.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )Шаги ()
Функция steps () точно определяет, сколько ключевых кадров будет отображаться за временной интервал анимации. Допустим, вы заявляете:
@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )Если вы используете шаги (10) в своей анимации, это обеспечит выполнение только 10 ключевых кадров за отведенное время.
.move ( animation: move 10s steps(10) infinite alternate; )Математика там хорошо работает. Каждую секунду элемент будет перемещаться на 10 пикселей влево и на 10 пикселей вниз до конца анимации, а затем снова в обратном направлении навсегда.
Это может быть отличным вариантом для анимации таблицы спрайтов, такой как эта демонстрация от simurai.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 4 * | 5 * | 10 | 12 | 5.1 * |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4 * | 6.0-6.1 * |
Дополнительные ресурсы
- Документы MDN
- MDN: использование CSS-анимации
- Могу ли я использовать - Поддержка браузера
- ВИДЕО: Введение в CSS-анимацию