From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/css/animation-timing-function/index.html | 92 ++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 files/ru/web/css/animation-timing-function/index.html (limited to 'files/ru/web/css/animation-timing-function') diff --git a/files/ru/web/css/animation-timing-function/index.html b/files/ru/web/css/animation-timing-function/index.html new file mode 100644 index 0000000000..c9c5c388b1 --- /dev/null +++ b/files/ru/web/css/animation-timing-function/index.html @@ -0,0 +1,92 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +translation_of: Web/CSS/animation-timing-function +--- +

{{CSSRef}}

+ +

CSS свойство animation-timing-function задаёт как происходит анимация в течении длительности каждого цикла.

+ +

{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}

+ + + +

Достаточно удобно использовать сокращённое свойство {{cssxref("animation")}} для того, чтобы установить все свойства для анимации одновременно.

+ +

Синтаксис

+ +
/* Keyword values */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Function values */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Steps Function keywords */
+animation-timing-function: steps(4, jump-start);
+animation-timing-function: steps(10, jump-end);
+animation-timing-function: steps(20, jump-none);
+animation-timing-function: steps(5, jump-both);
+animation-timing-function: steps(6, start);
+animation-timing-function: steps(8, end);
+
+/* Multiple animations */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Global values */
+animation-timing-function: inherit;
+animation-timing-function: initial;
+animation-timing-function: unset;
+ +

Временные функции могут быть установлены в пользовательских keyframes'ах в правилах @keyframes. Если в keyframe'е значение animation-timing-function указано, соответствующее значение animation-timing-function от элемента к которому анимация применена используется для этого keyframe'а.

+ +

Значения

+ +
+
<timingfunction>
+
Каждый {{cssxref("<timing-function>")}} представляет функцию расчета времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

См. CSS animations.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}Начальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("css.properties.animation-timing-function")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf