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


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



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


animation-direction | Свойство CSS

Свойство animation-direction определяет возможность обратного цикла

Свойство animation-direction определяет возможность воспроизводить сценарий в обратную сторону,для этого у свойства существуют дополнительные значения,указывающие на возможность воспроизведения анимации.Более объективный сценарий создаётся с применением расширенных свойств animation.Дополнительно следует применять альтернативные свойства для браузеров,для Firefox это -moz-animation-direction,для Safari или Chrome -webkit-animation-direction.Свойство применимо для блочных и строчных элементов и проходит валидацию согласно версии CSS3.

Расширенные свойства


СвойствоОписание
animationДобавляет анимацию в сокращённой форме
animation-nameОпределяет имя keyframe,которое вы собираетесь привязать к селектору
animation-durationОпределяет время до конца анимации
animation-timing-functionОпределяет скорость кривизны анимации
animation-delayОпределяет время задержки анимации до начала проигрывания
animation-animation-iteration-countОпределяет сколько раз будет воспроизведён сценарий анимации
-moz-animation-directionАльтернативное свойство для браузера Firefox
-webkit-animation-directionАльтернативное свойство для браузеров Safari и Chrome
@keyframesДобавляет стиль к воспроизводимой анимации в виде кадров
@-moz-keyframesАльтернативное правило для браузера Firefox
@-webkit-keyframesАльтернативное правило для браузеров Safari и Chrome


Дополнительные значения свойства animation-direction

ЗначениеОписание
normalЗначение по умолчанию.Сценарий анимации происходит только в одном направлении
alternateСценарий анимации происходит в прямом и обратном направлениях


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



Пример применения animation-direction

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8"><title>Свойство animation-direction</title>
<style>
div
{
  width:50px;
  height:50px;
  background:red;
  position:relative;
  animation:kubik 5s infinite;
  animation-direction:alternate;
  /* Альтернатива для Firefox: */
  -moz-animation:kubik 5s infinite;
  -moz-animation-direction:alternate;
  /* Альтернатива для Safari и Chrome: */
  -webkit-animation:kubik 5s infinite;
  -webkit-animation-direction:alternate;
}

@keyframes kubik
{
  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 kubik
{
  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 kubik
{
  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></div>
</body>
</html>


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



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





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






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

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

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