• Главное
• Радуга
• Как худеть
• Как бросить курить
• Сăмах
• Как создать сайт
• Лада приора
• Электросварка

• HTML
• CSS
• Web-диз
• JavaScript
• PHP
• jQuery
• SEO
• MySQL
• XML

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

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

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

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 к другой.

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

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

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

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

< !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 и более ранних версий.

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

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