Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

январь 2021
Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - transition-timing-function

Поддержка Браузеров

Internet Explorer Интернет эксплорер Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари, то есть поддерживается во всех основных браузерах.

Внимание!!! Свойство transition-timing-function не поддерживается в Internet Explorer 9 и более ранних версий.

Определение и использование. Свойство transition-timing-function определяет скорость кривой переходного эффекта. Свойство transition-timing-function определяет скорость изменения значения стилевого свойства для которого применяется эффект перехода. Свойство transition-timing-function представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через transition-property значение свойства.

Особенно интересное и полезное в данном случае не в том, что совершается какое-то изменение какого-то участка( элемента) страницы сайта. Вся удивительная и необходимая информация содержится в том, что свойство transition-timing-function, которое действует через стили CSS3 самостоятельно и независимо работает и при отключения JavaScripta в браузере Вашего компьютера. Вам не надо гадать: будет работать - не будет работать, потому как работает постоянно и стабильно.

Синтаксис:

 transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit;

Описание и Использование

Значение по умолчанию: ease
наследует: нет
Версия: CSS3
JavaScript синтаксис: object.style.transitionTimingFunction="linear"

Property Values

Значение Описание
ease Значение по умолчанию. Указывает, эффект перехода с начала медленно, потом быстро,потом медленно конце (эквивалент куб.Безье(0.25,0.1,0.25,1))
linear Указывает, эффект перехода с той же скоростью, от начала до конца (эквивалент куб.Безье(0,0,1,1))
ease-in Указывает, эффект перехода с медленного старта (эквивалент куб.Безье(0.42,0,1,1))
ease-out Указывает, эффект перехода ползучий (эквивалент куб.Безье(0,0,0.58,1))
ease-in-out Указывает, эффект перехода с медленным началом и конца(эквивалент куб.Безье(0.42,0,0.58,1))
cubic-bezier(n,n,n,n) Возможные значения числовых значений от 0 до 1
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.

Пишем программу:

< !DOCTYPE>
< html>
< head>
< style> 
div
{
width:120px;
height:50px;
background: #F7C;
color:white;
font-weight:bold;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}

#rr1 {transition-timing-function: linear;}
#rr2 {transition-timing-function: ease;}
#rr3 {transition-timing-function: ease-in;}
#rr4 {transition-timing-function: ease-out;}
#rr5 {transition-timing-function: ease-in-out;}

/* Safari */
#rr1 {-webkit-transition-timing-function: linear;}
#rr2 {-webkit-transition-timing-function: ease;}
#rr3 {-webkit-transition-timing-function: ease-in;}
#rr4 {-webkit-transition-timing-function: ease-out;}
#rr5 {-webkit-transition-timing-function: ease-in-out;}

div:hover
{
width:550px;
}
< /style>
< /head>
< body>

< p>< b>Примечание:< /b> Этот пример не работает в IE9 и более ранних версий.< /p>

< div id="rr1">linear< /div>< br>
< div id="rr2">ease< /div>< br>
< div id="rr3">ease-in< /div>< br>
< div id="rr4">ease-out< /div>< br>
< div id="rr5">ease-in-out< /div>


Наведите на элементы div, чтобы увидеть различные эффекты перехода.

Результат программы:

Примечание: Этот пример не работает в IE9 и более ранних версий.

linear

ease

ease-in

ease-out

ease-in-out

Наведите на элементы div, чтобы увидеть различные эффекты перехода.



seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...
ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: