Синтаксис анимации ключевого кадра онлайн урок.


# Базовая декларация & amp; Применение

@-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 = duration, 2s = delay, 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 пикселей вниз, до конца анимации, а затем снова в обратном направлении навсегда.

Это может быть отлично подходит для анимации spritesheet, например, этой демонстрации на simurai .

# Поддержка браузера

Эти данные поддержки браузера взяты из Caniuse , которая имеет более подробную информацию. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.

4 *12 *5 *10

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1 *12.1Нет464