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


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



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


animation-timing-function | Свойство CSS


Свойство animation-timing-function определяет скорость анимации

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


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

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

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



Применяемые значения

ЗначениеОписание
linearВыполнение сценария анимации происходит равномерно от начала до конца.Аналогично координатам Безье P1(0.25, 0.1) P2(0.25, 1.0)
easeЗначение по умолчанию,выполнение сценария происходит начинаясь медленно,затем происходит ускорение и к концу снова замедляется.Аналогично координатам Безье P1(0.0, 0.0) P2(1.0, 1.0
ease-inВыполнение сценария анимации начинается медленно.Аналогично координатам Безье P1(0.42, 0) P2(1.0, 1.0)
ease-outВыполнение сценария анимации происходит с медленным окончанием.Аналогично координатам Безье P1(0, 0) P2(0.58, 1.0)
ease-in-outВыполнение сценария анимации происходит с медленными началом и концом.Аналогично координатам Безье P1(0.42, 0) P2(0.58, 1.0)
cubic-bezierВыполнение сценария анимации происходит с Вашими координатами Безье в последовательности P1(x1, y1) P2(x2, y2) задавая числовые значения от 0 до 1


Пример применения всех значений

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство animation-timing-function</title>
<style>
div
{
  width:100px;
  height:52px;
  background:#2b9c00;
  text-decoration:blink;
  color:#ffffff;
  font-weight:bold;
  position:relative;
  animation:mymove 7s infinite;
  -moz-animation:mymove 7s infinite; /* Firefox */
  -webkit-animation:mymove 7s infinite; /* Safari and Chrome */
}

#linear {animation-timing-function:linear;}
#ease {animation-timing-function:ease;}
#ease-in {animation-timing-function:ease-in;}
#ease-out {animation-timing-function:ease-out;}
#ease-in-out {animation-timing-function:ease-in-out;}

/* Firefox: */
#linear {-moz-animation-timing-function:linear;}
#ease {-moz-animation-timing-function:ease;}
#ease-in {-moz-animation-timing-function:ease-in;}
#ease-out {-moz-animation-timing-function:ease-out;}
#ease-in-out {-moz-animation-timing-function:ease-in-out;}

/* Safari and Chrome: */
#linear {-webkit-animation-timing-function:linear;}
#ease {-webkit-animation-timing-function:ease;}
#ease-in {-webkit-animation-timing-function:ease-in;}
#ease-out {-webkit-animation-timing-function:ease-out;}
#ease-in-out {-webkit-animation-timing-function:ease-in-out;}

@keyframes mymove
{
  from {left:0px;}
  to {left:400px;}
}

@-moz-keyframes mymove /* Firefox */
{
  from {left:0px;}
  to {left:400px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
  from {left:0px;}
  to {left:400px;}
}
</style>
</head>
<body>
<div id="linear">linear</div>
<div id="ease">ease</div>
<div id="ease-in">ease-in</div>
<div id="ease-out">ease-out</div>
<div id="ease-in-out">ease-in-out</div>
</body>
</html>


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



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





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






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

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

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