animation-name

版本：CSS3

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

浏览器支持


IE10以上版本的浏览器都支持`animation-name`

语法

animation-name:none| IDENT

取值

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

默认值	none
适用于	所有元素，包含伪对象`::before`and`::after`
继承性	无
动画性	否
计算值	指定值
媒体	交互

实例

<style type="text/css">
div{
	width:100px;
	height:100px;
	position:relative;
	background-color:hsl(120,65%,75%);
	animation:demo 5s 1;
	-webkit-animation:demo 5s 1;
	}
@keyframes demo
{
 from{left:0px;}
 to{left:350px;
}
}
/*safari和chrome*/
@-webkit-keyframes demo
{
 from{left:0px;}
 to{left:350px;}
}
</style>
</head>
<body>
	<div></div>	
</body>

效果图：