Что такое CSS3 анимация-временная функция недвижимости и как его использовать?

Лучшее руководство по CSS3 анимация-временная функция недвижимости в 2024 году. В этом руководстве вы можете изучить примеров,Поддержка браузеров,Определения тегов и инструкции,грамматика,Онлайн примеры,примеров,примеров,Статьи по Теме,

CSS3 анимация-временная функция недвижимости

Предыдущий: CSS3 анимация-продолжительность недвижимости

Далее: CSS3 свойство анимации задержки

примеров

С самого начала и до конца анимации, чтобы играть с той же скоростью:

animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */

Попробуйте »
В нижней части этой страницы для большего количества примеров.

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

属性
animation-timing-function	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

Определения тегов и инструкции

Как анимация-временная функция Определяет анимация будет завершить цикл.

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

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

По умолчанию:	легкость
Наследование:	нет
Версия:	CSS3
Синтаксис JavaScript:	объект object.style.animationTimingFunction = "линейный"

грамматика

animation-timing-function:value;

Математические функции анимации-временная функция использования, называется кубической кривой Безье, кривая скорости. С помощью этой функции вы можете использовать свои собственные ценности, или использовать один из предопределенных значений:

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

Совет: Попробуйте функции после "попробовать" использовать другое значение.

Онлайн примеры

примеров

Чтобы лучше понять различные значения функции расчет времени, предусмотрен набор из пяти различных значений пяти различных Div элементов:

/* W3C and Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

Попробуйте »

примеров

Так же, как и в предыдущем примере, но определяется функцией кубической кривой Безье скорость:

/* W3C and Opera: */
#div1 {animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Попробуйте »