Основна декларация и употреба
@-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 */ )Стенография за анимация
Просто отделете всички отделни стойности с интервал. Поръчката няма значение, освен когато се използват както продължителност, така и забавяне, те трябва да бъдат в този ред. В примера по-долу 1s = продължителност, 2s = закъснение, 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; )Стъпки ()
Функцията стъпки () контролира точно колко ключови кадри ще се визуализират във времевия интервал на анимацията. Да кажем, че декларирате:
@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )Ако използвате стъпки (10) във вашата анимация, тя ще гарантира, че само 10 ключови кадъра се случват за определеното време.
.move ( animation: move 10s steps(10) infinite alternate; )Там математиката работи добре. На всяка секунда елементът ще се движи с 10px наляво и 10px надолу, до края на анимацията и след това отново завинаги.
Това може да е чудесно за анимация на спрайтове като тази демонстрация от simurai.
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | 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 анимации