1. Home
  2. CSS3 @keyframes правила

Лучшее руководство по CSS3 @keyframes правила в 2024 году. В этом руководстве вы можете изучить примеров,Поддержка браузеров,Определения тегов и инструкции,грамматика,Онлайн примеры,примеров,примеров,примеров,Статьи по Теме,

CSS3 @keyframes правила

примеров

Сделать DIV элемент постепенно перемещается 200 пикселей:

@keyframes mymove
{
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% от селектора.

Примечание: Используйте свойство анимации для управления внешним видом анимации также используется для выбора связывания анимации.,

грамматика

@keyframesanimationname {keyframes-selector {css-styles;}}

значение объяснение
animationname Обязательный параметр. Определить имя анимации.
Ключевые кадры-селектор Обязательный параметр. Процент продолжительности анимации.

Юридическое значение:

0-100%
от (и 0% идентичны)
(и 100% идентичны)

Примечание: Вы можете использовать ключевые кадры анимированного-селекторы.

CSS-стили Обязательный параметр. Один или несколько атрибутов стиля CSS легитимные

примеров

Онлайн примеры


примеров

Многие из селектора ключа кадра, чтобы добавить фильм:

@keyframes mymove
{
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 много в одной анимации:

@keyframes mymove
{
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:

@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;}
}

@-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 Анимация

Горячие учебники

Contact US

CSS3 @keyframes правила
10/30