css3 animation 动画应用 分类： css css3 css动画 动画 animation 2014-08-12 13:21 209人阅读 评论(0) 收藏

用css编写动画，相比较js（jquery）的动画来说，对于浏览器的压力较小，所以对于支持css3的浏览器，推荐使用css3来制作简单动画

1、将动画使用的3帧图画切在一张图片上，并确定好每一帧图画的宽、高、在图片上的位置

2、编写css程序

.people{
	background-image: url('images/img.png');
	background-position:-5px -530px;
	width: 85px;
	height:102px;
	display:block;
}
.people_run{
	background-position:-5px -530px;
	animation: running 0.1s; /* 控制动画播放时间 */
	-moz-animation: running 0.1s;	/* Firefox */
	-webkit-animation: running 0.1s;	/* Safari 和 Chrome */
	-o-animation: running 0.1s;	/* Opera */
}
@keyframes running{
	0%   	{background-position:-5px -530px;}/* 第1帧的图 */
	15%  	{background-position:-5px -530px;}
	15.1%	{background-position:-95px -530px;}/* 第2帧的图 */
	75%  	{background-position:-95px -530px;}
	75.1%  	{background-position:-5px -530px;}/* 第3帧的图 */
	100% 	{background-position:-5px -530px;}
}

@-moz-keyframes running /* Firefox */
{
	0%   	{background-position:-5px -530px;}
	15%  	{background-position:-5px -530px;}
	15.1%	{background-position:-95px -530px;}
	75%  	{background-position:-95px -530px;}
	75.1%  	{background-position:-5px -530px;}
	100% 	{background-position:-5px -530px;}
}

@-webkit-keyframes running /* Safari 和 Chrome */
{
	0%   	{background-position:-5px -530px;}
	15%  	{background-position:-5px -530px;}
	15.1%	{background-position:-95px -530px;}
	75%  	{background-position:-95px -530px;}
	75.1%  	{background-position:-5px -530px;}
	100% 	{background-position:-5px -530px;}
}

@-o-keyframes running /* Opera */
{
	0%   	{background-position:-5px -530px;}
	15%  	{background-position:-5px -530px;}
	15.1%	{background-position:-95px -530px;}
	75%  	{background-position:-95px -530px;}
	75.1%  	{background-position:-5px -530px;}
	100% 	{background-position:-5px -530px;}
}

3、编写js辅助程序

$(".people").addClass('people_run');

由于css的动画只有在新加class上去的时候会有效果，

所以在动画播放完成后，需要remove掉class，

确保下一次使用addClass的时候能正常播放出动画效果。

版权声明：本文为博主原创文章，未经博主允许不得转载。