CSS3 анимации

CSS3, мы можем создать анимацию, которая может заменить много страниц анимированных изображений, флэш-анимации и JavaScripts.

CSS3
анимация

CSS3 @keyframes правила

Для создания CSS3 анимации, вам придется выучить правила @keyframes.

@keyframes правило для создания анимации. Укажите стиль CSS и анимация будет постепенно меняться к новому стилю от текущего стиля в правилах @keyframes.

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

Цифры в таблице представляют первый браузер для поддержки номер версии имущества.

Сразу же после цифровой -webkit-, -ms- или -moz- назад в поддержку префикса атрибута первый номер версии браузера.

属性
@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-
animation	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 myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

CSS3 анимации

При создании анимации @keyframes, привязать его к селектору, в противном случае анимация не будет иметь никакого эффекта.

Укажите, по крайней мере два CSS3 анимации свойство привязан к селектору:

Он определяет имя анимации
Когда заданная длина анимации

примеров

"Myfirst" анимация связана с сНу элемента Продолжительность: 5 секунд:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

Попробуйте »

Примечание: Вы должны определить продолжительность названия анимации и анимации.Если опустить длительность анимации не будет работать, так как значение по умолчанию равно 0.

Что CSS3 анимации?

Анимация элемент должен делать постепенный переход от одного стиля к другому эффекту стиля.

Вы можете изменить, как много стилей, как много раз.

Пожалуйста, используйте процентное изменение в установленный срок, или ключевое слово "от" и "до", что эквивалентно 0% и 100%.

0% это начало анимации, анимация на 100%.

Для лучшей поддержки браузера, вы всегда должны определить 0% и 100% от селектора.

примеров

Изменение цвета фона при анимации составляет 25% и 50%, и 100% завершена, когда анимация снова изменилась:

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

Попробуйте »

примеров

Изменение цвета фона и расположение:

@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Попробуйте »

CSS3 свойства анимации

В следующей таблице перечислены правила @keyframes и все свойства анимации:

свойство	описание	CSS
@keyframes	Положения анимации.	3
анимация	Сокращённое свойство для всех свойств анимации, в дополнение к анимации-игра-государственной собственности.	3
анимация имя	Задает имя @keyframes анимации.	3
анимация-продолжительность	Положения анимации требуется, чтобы завершить цикл секунд или миллисекунд. Значение по умолчанию равно 0.	3
анимация-временная функция	Заранее заданная скорость кривой анимации. По умолчанию это "легкость".	3
анимации задержки	Когда предопределенное анимации начинается. Значение по умолчанию равно 0.	3
анимация-итерация подсчета	Предопределенное число раз играет анимацию. Значение по умолчанию равно 1.	3
анимация-направление	Независимо от положений анимации для воспроизведения в обратном направлении к следующему циклу. Значение по умолчанию является "нормальным".	3
анимация-плей-состояние	Независимо от положений анимации работает или приостановлена. По умолчанию "работает".	3

Следующие два примера установить все свойства анимации:

примеров

Запуск myfirst анимации, установить все атрибуты:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Попробуйте »