MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

 
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  

浏览器兼容

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

文档标签和贡献者

 此页面的贡献者: zhuangyin, teoli, Sebastianz, hutuxu
 最后编辑者: zhuangyin,