css3的动画(animation)属性的详细说明（附代码）1

css3的动画(animation)属性的详细说明（附代码）

[摘要]本篇文章给大家带来的内容是关于css3的动画(animation)属性的详解（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。css3动画（animation）具有以下属性：...

本篇文章给大家带来的内容是关于css3的动画(animation)属性的详解（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

css3动画（animation）具有以下属性：

1、animation-name 自定义动画名称
2、animation-duration 动画指定需要多少秒或毫秒完成，默认值是0;
3、animation-timing-function 动画的时间曲线，linear 匀速， ease 先慢后快，结束前变慢。
4、animation-delay 动画在启动前的延迟间隔，默认是0
5、animation-iteration-count 动画的播放次数，默认是1
6、animation-direction 是否轮流反向播放动画
7、animation-play-state 动画是否正在运行或已暂停。值：paused 指定暂停动画； running 指定正在运行的动画，默认。

实例：本demo以平移（translate）为例说明动画的整个过程

html:

<body>
		<div class="warp">
			
		</div>
</body>

css:

.warp{ height: 100px; width: 100px; border: 1px solid #eee; animation-name:moves; animation-direction:alternate; animation-delay: 0.2s; animation-duration: 5s; animation-play-state: paused; animation-iteration-count: 3; /*以上可以简写成：*/ animation: moves 5s linear 0.2s 3; }

@keyframes moves{ /*动画名称自定义*/ 10%{ /*时间点可以任意，10%表示当时间进行到10%是元素要达到的状态*/ transform: translate(100px,0); -ms-transform:translate(100px,0); /*IE 9*/ -moz-transform:translate(100px,0); /* Firefox */ -webkit-transform:translate(100px,0); /* Safari 和 Chrome */ -o-transform:translate(100px,0); /* Opera */ } 30%{ /*时间点可以任意*/ transform: translate(100px,100px); -ms-transform:translate(100px,100px); /*IE 9*/ -moz-transform:translate(100px,100px); /* Firefox */ -webkit-transform:translate(100px,100px); /* Safari 和 Chrome */ -o-transform:translate(100px,100px); /* Opera */ } 60%{ /*时间点可以任意*/ transform: translate(0,100px); -ms-transform:translate(0,100px); /*IE 9*/ -moz-transform:translate(0,100px); /* Firefox */ -webkit-transform:translate(0,100px); /* Safari 和 Chrome */ -o-transform:translate(0,100px); /* Opera */ } 100%{ /*时间点可以任意*/ transform: translate(0,0); -ms-transform:translate(0,0); /*IE 9*/ -moz-transform:translate(0,0); /* Firefox */ -webkit-transform:translate(0,0); /* Safari 和 Chrome */ -o-transform:translate(0,0); /* Opera */ } }