CSS参考手册
动画和转换 | Animations & Transitions
动画名称属性 | animation-name
animation-name
属性指定应用的一系列动画,每个名称代表一个由@keyframes
定义的动画序列。
/* Single animation */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;
/* Multiple animations */
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;
/* Global values */
animation-name: initial
animation-name: inherit
animation-name: unset
使用速记属性animation
一次性设置所有动画属性通常很方便。
Initial value |
none |
---|---|
Applies to |
all elements, ::before and ::after pseudo-elements |
Inherited |
no |
Media |
visual |
Computed value |
as specified |
Animation type |
discrete |
Canonical order |
the unique non-ambiguous order defined by the formal grammar |
语法
值
none
特殊关键字,表示无关键帧。可以不改变其他标识符的顺序而使动画失效,或者使层叠的动画样式失效。IDENT
标识动画的字符串,由大小写不敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母,数字不能在字母前面,不允许两个横线出现在开始位置。
注意:当您在一个animation-*
属性上指定了多个以逗号分隔的值时,它们将以animation-name
不同的方式分配给属性中指定的动画,具体取决于有多少个值。有关更多信息,请参阅设置多个动画属性值。
形式语法
[ none | <keyframes-name> ]#where
<keyframes-name> = <custom-ident> | <string>
示例
有关示例,请参阅CSS动画。
规范
Specification |
Status |
Comment |
---|---|---|
CSS AnimationsThe definition of 'animation-name' in that specification. |
Working Draft |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
(Yes)-webkit 43.0 |
(Yes)-webkit (Yes) |
5.0 (5.0)-moz 16.0 (16.0)1 |
10 |
12 -o 12.10 |
4.0-webkit |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support |
? |
(Yes)-webkit (Yes) |
? |
? |
? |
? |
? |
动画和转换 | Animations & Transitions相关

层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。