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

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
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>

效果图：

上篇： animation

下篇： animation-duration