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


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



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


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

Свойство transition-timing-function устанавливает метод расчета промежуточных значений при анимированном переходе.




Свойство transition-timing-function устанавливает метод расчета промежуточных значений свойств при анимированном переходе.Установленных значений может быть несколько,при таких условиях прописывайте значения через запятую.Сам переход будет предназначен для свойства указанного в свойстве transition-property или transition например для ширины = ( transition-property:weight; ) или ( transition:weight 3s; ).Существуют альтернативные свойства для браузеров.Для Mozila -moz-transition-timing-function,для Safari и Chrome -webkit-transition-timing-function,а для Opera -o-transition-timing-function.Свойство применимо ко всем элементам и псевдоэлементам :before и :after,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




Дополнительные свойства применяемые к transition-timing-function


Свойство
Описание
-moz-transition-timing-functionАльтернативное свойство для браузера Mozila
-webkit-transition-timing-functionАльтернативное свойство для браузеров Safari и Chrome
-o-transition-timing-functionАльтернативное свойство для браузера Opera

Дополнительные значения применяемые к transition-timing-function


Значение
Описание
cubic-bezier(X1;Y1;X2;Y2)Значения кривой Безье 3-го порядка с координатами P1(X1,Y1) P2(X2,Y2).Где X1,Y1,X2,Y2 это значения координат заданные пользователем,в промежутке от 0 до 1 для каждой координаты
easeСоздаёт эффект перехода,который начинается с медленного старта,затем ускоряется,и медленно заканчивается.Аналогично значению cubic-bezier(0.25,0.1,0.25,1)
linearСоздаёт эффект перехода,который начинается,продолжается и заканчивается на одной скорости.Аналогично значению cubic-bezier(0,0,1,1)
ease-inСоздаёт эффект перехода,который начинается медленно.Аналогично значению cubic-bezier(0.42,0,1,1)
ease-outСоздаёт эффект перехода,который заканчивается медленно.Аналогично значению cubic-bezier(0,0,0.58,1)
ease-in-outСоздаёт эффект перехода,который начинается и заканчивается медленно.Аналогично значению cubic-bezier(0,0,0.58,1)
hiddenПри развороте заднюю часть элемента не будет видно

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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство transition-timing-function</title>
<style type="text/css">
<!--
div {
width:99%;
height:50px;
background:blue;
border:5px double red;
color:white;
text-decoration:blink;
font-weight:bold;
transition:width 3s;
-moz-transition:width 3s;
-webkit-transition:width 3s;
-o-transition:width 3s;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}
div:hover {
width:80px;
}
-->
</style>
</head>
<body>
<center>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div>
</center>
</body>
</html>

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




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





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






Источник: http://www.w3.org/TR/css3-transitions/#transition-timing-function
Категория: Свойства перехода | Добавил: IZOTOP (30.05.2012) | Автор: Меренков Михаил E W
Просмотров: 703 | Теги: css, пример, transition-timing-function, анимированный переход, style | Рейтинг: 0.0/0

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

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