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

Пн Вт Ср Чт Пт Сб Вс
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


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

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

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

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

Safari и Chrome поддерживают альтернативу -WebKit-анимация-времени-функция animation-timing-function свойство.

Внимание!!! Свойство animation-timing-function( анимация-времени-функция) не поддерживается в Internet Explorer 9 и более ранних версий.

Определение и использование. Функция animation-timing-function определяет скорость кривой анимации. Кривая скорости определяет время анимации и используется для перехода от одного набора стилей CSS к другому. Кривая скорости используется для внесения изменений непрерывно.

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


Синтаксис:

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

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

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

Animation-timing-function указывает кривой скорости анимации.

Скорость кривой определяет время анимации для изменения из одного набора стилей CSS к другой.


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

Скорость кривой используется для того, чтобы плавно изменялась сама анимация.

значение по умолчанию: ease
наследует: нет
Версия: CSS3
JavaScript синтаксис: "объект".style.animationTimingFunction="линейный"


Свойства Значения

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


ПРИМЕР №1

Пишем программу - Играть анимацию с той же скоростью от начала до конца:

< !DOCTYPE html>
< html>
< head>
< style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-timing-function:linear;

/* Safari и Chrome */
-webkit-animation:mymove 5s infinite;
-webkit-animation-timing-function:linear;
}

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

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
< /style>
< /head>
< body>

< p>< strong>Внимание!!! < /strong> анимация-времени-свойство функции 
не поддерживаются в Internet Explorer 9 и более ранних версий.< /p>

< div>< /div>

< /body>
< /html>                      

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

Внимание!!! Свойство анимация-времени-функции не поддерживаются в Internet Explorer 9 и более ранних версий.



ПРИМЕР №2

Чтобы лучше понять различные значения функции синхронизации; Вот пять различных элементов с пятью различными значениями:

linear
ease
ease-in
ease-out
ease-in-out



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
... ... ...

обратно на главную     назад    дальше     вперед

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