пример
Сделать элемент постепенно двигаться вниз 200px:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Правило @keyframes определяет код анимации.
Анимация создается путем постепенного перехода от одного набора стилей CSS к другому.
Во время анимации, вы можете изменить набор стилей CSS много раз.
Укажите , когда изменение стиля будет происходить в процентах, или с ключевыми словами "from" и "to" , который так же , как 0% и 100%. 0% это начало анимации, 100%, когда анимация завершена.
Совет: Для лучшей поддержки браузера, вы всегда должны определить как 0% и 100% селекторы.
Note: Используйте свойства анимации для управления внешним видом анимации, а также привязать анимацию к селекторов.
Поддержка браузеров
Числа в таблице определяет первую версию браузера, который полностью поддерживает правила.
Числа следуют -webkit-, -moz- или -O- указать первую версию, которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| @keyframes | 43,0 4.0 -webkit- | 10,0 | 16,0 5,0 -moz- | 9.0 4.0 -webkit- | 30,0 15,0 -webkit- 12,0 -о- |
CSS Синтаксис
@keyframesanimationname {keyframes-selector {css-styles;}}Значения свойств
| Стоимость | Описание |
|---|---|
| animationname | Необходимые. Определяет имя анимации. |
| keyframes-selector | Необходимые. Процент от продолжительности анимации. Допустимые значения: 0-100% Note: Вы можете иметь много ключевых кадров-селекторов в одной анимации. |
| css-styles | Необходимые. Один или несколько свойств CSS стилей правовых |
Еще примеры
пример
Добавьте много ключевых кадров селекторов в одной анимации:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Попробуй сам " пример
Изменение стилей CSS много в одной анимации:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Попробуй сам " пример
Многие искатели ключевой кадр со многими стилями CSS:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
Попробуй сам " Похожие страницы
CSS3 учебник: CSS3 Animations