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


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



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


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

Свойство animation-duration определяет время воспроизводимого сценария

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


Расширенные значения

ЗначениеОписание
ВремяЗначение времени:милисекунды (ms),секунды (s).Указывает время анимации до завершения,значение по умолчанию 0 = отсутствие анимации

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

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


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

<!DOCTYPE html>
<html>
<head>
<title>Свойство animation-duration</title>
<meta charset="utf-8">
<style>
div
{
  width:100px;
  height:100px;
  background:#2b9c00;
  position:relative;
  animation:mymove infinite;
  animation-duration:10ms;
  /* Альтернатива для Firefox: */
  -moz-animation:mymove infinite;
  -moz-animation-duration:10ms;
  /* Альтернатива для Safari и Chrome: */
  -webkit-animation:mymove infinite;
  -webkit-animation-duration:10ms;
}

@keyframes mymove
{
  from {top:0px;}
  to {top:300px;}
}
/* Альтернатива для Firefox: */
@-moz-keyframes mymove
{
  from {top:0px;}
  to {top:300px;}
}
/* Альтернатива для Safari и Chrome: */
@-webkit-keyframes mymove
{
  from {top:0px;}
  to {top:300px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>


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

* Ускорим процесс снизив время окончания сценария до 10ms



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





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






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

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

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