Лучшее руководство по CSS3 анимация-временная функция недвижимости в 2024 году. В этом руководстве вы можете изучить
примеров,Поддержка браузеров,Определения тегов и инструкции,грамматика,Онлайн примеры,примеров,примеров,Статьи по Теме,
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);}
Попробуйте »
Статьи по Теме
CSS3 учебник: CSS3 Анимация