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

Описание

+ +

CSS-свойство animation-direction определяет, должна ли анимация воспроизводиться вперед, назад или переменно вперед и назад.
+
+ Также удобно использовать сокращенное свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Одиночная анимация */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* Несколько анимаций */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* Глобальные значения */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+
+ +

Значения

+ +
+
normal
+
Анимация проигрывается вперед каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. Это значение по умолчанию.
+
reverse
+
Анимация проигрывается наоборот, с последнего положения до первого и потом снова сбрасывается в конечное положение и снова проигрывается.
+
alternate
+
Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с начального положения, доходит до конечного, а во втором цикле продолжает с конечного и доходит до начального и так далее, в зависимости от количества циклов анимации animation-iteration-count.
+
alternate-reverse
+
Анимация начинает проигрываться с конечного положения и доходит до начального, а в следующем цикле продолжая с начального переходит в конечное, в зависимости от количества итераций анимации animation-iteration-count.
+
+
+ +

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

+ +
{{csssyntax}}
+ +

Примеры

+ +

Смотрите примеры CSS анимаций.

+ +

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

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

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

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012{{property_prefix("-o")}}
+ 12.50		4.0{{property_prefix("-webkit")}}
reverse19{{CompatGeckoDesktop("16.0")}}10{{CompatNo}}{{CompatNo}}
alternate-reverse19{{CompatGeckoDesktop("16.0")}}10{{CompatNo}}{{CompatNo}}
Unprefixed{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
reverse{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
alternate-reverse{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
Без префиксов{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
+ +

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

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