@keyframes | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Вторник, 06.12.2016
Главная » Справочник CSS3 » Свойства анимации


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


@keyframes | Свойство CSS

Правило @keyframes для создания анимации




Свойство правила @keyframes создавать кадры анимации по имени,которому установлены значения в стилях.Дополнительно следует применять альтернативные правила для браузеров,для Firefox это @-moz-keyframes,для Safari или Chrome @-webkit-keyframes.Свойство проходит валидацию согласно версии CSS3.




Дополнительные свойства


Свойство
Описание
@-moz-keyframesАльтернативное правило для браузера Firefox
@-webkit-keyframesАльтернативное правило для браузеров Safari и Chrome

Дополнительные значения правила @keyframes


Значение
Описание
Имя анимацииОбязательное значение по которому определяется сценарий анимации
fromРавно 0 % - может быть несколько селекторов
toРавно 100 % - может быть несколько селекторов
styleОбязательное значение стилей применимых к анимации

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство animation</title>
<style>
.animation  {
width:100px;
height:100px;
background:red;
position:relative;
animation-name:animation;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Альтернатива для Firefox: */
-moz-animation-name:animation;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Альтернатива для Safari и Chrome: */
-webkit-animation-name:animation;
-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;
}

@keyframes animation
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:400px; top:0px;}
50%  {background:blue; left:400px; top:400px;}
75%  {background:green; left:0px; top:400px;}
100% {background:red; left:0px; top:0px;}
}
/* Альтернатива для Firefox: */
@-moz-keyframes animation
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:400px; top:0px;}
50%  {background:blue; left:400px; top:400px;}
75%  {background:green; left:0px; top:400px;}
100% {background:red; left:0px; top:0px;}
}
/* Альтернатива для Safari и Chrome: */
@-webkit-keyframes animation
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:400px; top:0px;}
50%  {background:blue; left:400px; top:400px;}
75%  {background:green; left:0px; top:400px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div class="animation"></div>

</body>
</html>

Пример в действии



Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-animations/#keyframes
Категория: Свойства анимации | Добавил: IZOTOP (22.03.2012) | Автор: Меренков Михаил E W
Просмотров: 2023 | Теги: css, свойство, @keyframes, style | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]