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-fill-mode/index.html | 235 ++++++++++++++++++++++++ 1 file changed, 235 insertions(+) create mode 100644 files/ru/web/css/animation-fill-mode/index.html (limited to 'files/ru/web/css/animation-fill-mode/index.html') diff --git a/files/ru/web/css/animation-fill-mode/index.html b/files/ru/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..6e1d0ef170 --- /dev/null +++ b/files/ru/web/css/animation-fill-mode/index.html @@ -0,0 +1,235 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - CSS анимации + - CSS свойства +translation_of: Web/CSS/animation-fill-mode +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Описание

+ +

CSS свойство animation-fill-mode определяет, как нужно применять стили к объекту анимации до и после ее выполнения.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Несколько значений могут быть заданы через запятую. */
+/* Каждое значение соответствует для анимации в animation-name. */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+
+ +

Значения

+ +
+
none
+
Стили анимации не будут применены к элементу до и после ее выполнения.
+
forwards
+
По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями {{cssxref("animation-direction")}} и {{cssxref("animation-iteration-count")}}: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-countпоследний ключевой кадр
normalлюбое100% или to
reverseлюбое0% или from
alternateчетное0% или from
alternateнечетное100% или to
alternate-reverseчетное100% или to
alternate-reverseнечетное0% или from
+
+
backwards
+
Элемент сохранит стиль первого ключевого кадра на протяжении периода {{cssxref("animation-delay")}}. Первый ключевой кадр определяется значением {{cssxref("animation-direction")}}: + + + + + + + + + + + + + + + + + +
animation-directionпервый ключевой кадр
normal или alternate0% или from
reverse или alternate-reverse100% или to
+
+
both
+
Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.
+
+ +

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

+ +
{{csssyntax}}
+
+ +

Пример

+ +

Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.

+ +

HTML

+ +
<p>Наведите курсор мыши на серый блок</p>
+<div class="demo">
+  <div class="grows">Этот просто растет</div>
+  <div class="growsandstays">Этот растет и остается большим</div>
+</div>
+ +

CSS

+ +
.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+  font-family: sans-serif;
+}
+@keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+@-webkit-keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+.demo:hover .grows {
+    animation-name: grow;
+    animation-duration: 3s;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+}
+.demo:hover .growsandstays {
+    animation-name: grow;
+    animation-duration: 3s;
+    animation-fill-mode: forwards;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+    -webkit-animation-fill-mode: forwards;
+}
+ +

{{EmbedLiveSample('Example',700,300)}}

+ +

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

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

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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012{{property_prefix("-o")}}
+ 12.10		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

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

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