CSS3 @keyframes правила
примеров
Сделать DIV элемент постепенно перемещается 200 пикселей:
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
Попробуйте »
В нижней части этой страницы для большего количества примеров.
Поддержка браузеров
| 属性 | |||||
|---|---|---|---|---|---|
| @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 -o- |
Определения тегов и инструкции
Использование правил @keyframes, вы можете создать анимацию.
Создание анимации путем постепенного изменения настроек от одного стиля к другому CSS.
Во время анимации, вы можете изменить время настройки стиля CSS.
Использование происходит, когда заданное изменение в%, или ключевое слово "от" и "до", и это 0% до 100% идентичны.
0% это начало анимации, 100%, когда анимация завершена.
Для обеспечения оптимальной поддержки браузера, вы всегда должны быть определены как 0% и 100% от селектора.
Примечание: Используйте свойство анимации для управления внешним видом анимации также используется для выбора связывания анимации.,
грамматика
| значение | объяснение |
|---|---|
| animationname | Обязательный параметр. Определить имя анимации. |
| Ключевые кадры-селектор | Обязательный параметр. Процент продолжительности анимации. Юридическое значение: 0-100% Примечание: Вы можете использовать ключевые кадры анимированного-селекторы. |
| CSS-стили | Обязательный параметр. Один или несколько атрибутов стиля CSS легитимные |
Онлайн примеры
примеров
Многие из селектора ключа кадра, чтобы добавить фильм:
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
Попробуйте »
примеров
Изменение стилей CSS много в одной анимации:
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
Попробуйте »
примеров
Многие искатели ключевой кадр со многими стилями CSS:
{
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;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
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 Анимация