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可以很方便地同时设置所有的动画属性。

初始值none
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性否
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

值

none
特殊关键字，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。
IDENT
标识动画的字符串，由大小写敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。

Formal syntax

[ none | <keyframes-name> ]#
where 
<keyframes-name> = <custom-ident> | <string>

示例

See CSS animations for examples.

标准

Specification Status Comment
CSS Animations
animation-name		 Working Draft

浏览器兼容

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)		 10  12 -o
12.10 #		 4.0-webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)		 10 ? ?

See also