From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/animation-fill-mode/index.html | 189 +++++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 files/zh-cn/web/css/animation-fill-mode/index.html (limited to 'files/zh-cn/web/css/animation-fill-mode') diff --git a/files/zh-cn/web/css/animation-fill-mode/index.html b/files/zh-cn/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..03a4fa5963 --- /dev/null +++ b/files/zh-cn/web/css/animation-fill-mode/index.html @@ -0,0 +1,189 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-fill-mode +--- +
{{CSSRef}}
+ +

CSS 属性 animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标。

+ +
{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}
+ + + +

使用简写属性 {{cssxref("animation")}} 一次性设置所有动画属性通常很方便。

+ +

语法

+ +
/* Single animation */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Multiple animations */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+
+ +

值

+ +
+
none
+
当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。
+
forwards
+
目标将保留由执行期间遇到的最后一个关键帧计算值。 最后一个关键帧取决于{{cssxref("animation-direction")}}和{{cssxref("animation-iteration-count")}}的值： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-countlast keyframe encountered
normaleven or odd100% or to
reverseeven or odd0% or from
alternateeven0% or from
alternateodd100% or to
alternate-reverseeven100% or to
alternate-reverseodd0% or from
+
+
backwards
+
动画将在应用于目标时立即应用第一个关键帧中定义的值，并在{{cssxref("animation-delay")}}期间保留此值。 第一个关键帧取决于{{cssxref("animation-direction")}}的值： + + + + + + + + + + + + + + + + + +
animation-directionfirst relevant keyframe
normal or alternate0% or from
reverse or alternate-reverse100% or to
+
+
both
+
动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。
+
+ +
+

注意：当您在animation-*属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 {{cssxref("animation-name")}} 属性中指定的动画。 有关更多信息，请参阅设置多个动画属性值。

+
+ +

正式语法

+ +
{{csssyntax}}
+
+ +

示例

+ +

您可以在以下示例中看到 animation-fill-mode 的效果。 它演示了如何对于运行无限时间的动画，可以使其保持最终状态而不是恢复到原始状态（这是默认状态）。

+ +

HTML

+ +
<p>Move your mouse over the gray box!</p>
+<div class="demo">
+ <div class="growsandstays">This grows and stays big.</div>
+  <div class="grows">This just grows.</div>
+</div>
+ +

CSS

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

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

+ +

更多示例请查看 CSS 动画 。

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}{{Spec2('CSS3 Animations')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.animation-fill-mode")}}

+ +

另见

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