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/index.html | 344 +++++++++++++++++++++++++++++++ 1 file changed, 344 insertions(+) create mode 100644 files/zh-cn/web/css/animation/index.html (limited to 'files/zh-cn/web/css/animation') diff --git a/files/zh-cn/web/css/animation/index.html b/files/zh-cn/web/css/animation/index.html new file mode 100644 index 0000000000..d503f6b8f4 --- /dev/null +++ b/files/zh-cn/web/css/animation/index.html @@ -0,0 +1,344 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - CSS + - CSS Animations + - CSS Property + - CSS3 动画 + - Reference +translation_of: Web/CSS/animation +--- +
{{CSSRef}}
+ +

CSS animation 属性是 {{cssxref("animation-name")}}，{{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}，{{cssxref("animation-delay")}}，{{cssxref("animation-iteration-count")}}，{{cssxref("animation-direction")}}，{{cssxref("animation-fill-mode")}} 和 {{cssxref("animation-play-state")}} 属性的一个简写属性形式。

+ +

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

+ +
/* @keyframes duration | timing-function | delay |
+   iteration-count | direction | fill-mode | play-state | name */
+animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+animation: 3s slidein;
+ + + +

{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}

+ +

哪些属性是可动画的？值得注意的是，此描述也适用于CSS变换。

+ +

{{cssinfo}}

+ +

语法

+ +

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。

+ +

每组动画规定的属性如下：

+ + + +

每个动画定义中的属性值的顺序很重要：可以被解析为 {{cssxref("<time>")}} 的第一个值被分配给{{cssxref("animation-duration")}}， 第二个分配给 {{cssxref("animation-delay")}}。

+ +

每个动画定义中的值的顺序，对于区分 {{cssxref("animation-name")}} 值与其他关键字也很重要。解析时，对于除 {{cssxref("animation-name")}} 之外的有效的关键字，必须被前面的简写中没有找到值的属性所接受。此外，在序列化时，{{cssxref("animation-name")}} 与以及其他属性值做区分等情况下，必须输出其他属性的默认值。

+ +

Values

+ +
+
<single-animation-iteration-count>
+
动画播放的次数。该值必须是{{cssxref("animation-iteration-count")}}可用的值之一。
+
<single-animation-direction>
+
动画播放的方向。该值必须是{{cssxref("animation-direction")}}可用的值之一。
+
<single-animation-fill-mode>
+
确定动画在执行之前和之后这两个阶段应用的样式。该值必须是{{cssxref("animation-fill-mode")}}可用的值之一。
+
<single-animation-play-state>
+
确定动画是否正在播放。该值必须是{{cssxref("animation-play-state")}}中可用的值之一。
+
+ +

语法

+ +
{{csssyntax("animation")}}
+
+ +

范例

+ +

赛隆人之眼(赛隆人是一个虚构的生化人种族,出自科幻电视系列剧星际大争霸系列)

+ +
<div class="view_port">
+  <div class="polling_message">
+    Listening for dispatches
+  </div>
+  <div class="cylon_eye"></div>
+</div>
+ +
.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: linear-gradient(to right,
+      rgba(0, 0, 0, .9) 25%,
+      rgba(0, 0, 0, .1) 50%,
+      rgba(0, 0, 0, .9) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: 4s linear 0s infinite alternate move_eye;
+          animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+ +

{{EmbedLiveSample('Cylon_Eye')}}

+ +

更多示例请参阅使用CSS动画。

+ +

潜在的问题

+ +

眨眼和闪烁的动画对于有认知问题的人来说是有问题的，比如注意力缺陷多动障碍(ADHD)。此外，某些动画效果可以触发前庭神经紊乱、癫痫、偏头痛和暗点敏感性。

+ +

考虑提供一种暂停或禁用动画的机制，以及使用 Reduced Motion Media Query（简约运动媒体查询），为那些表示不喜欢动画的用户创建一个良好的体验。

+ + + +

规范

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

浏览器兼容性

+ +

{{Compat("css.properties.animation")}}

+ +

Quantum CSS notes

+ + + +

更多

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