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

浏览器支持

语法

取值

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

实例

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;}
} 

效果图：

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com