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:

立即学习“前端免费学习笔记（深入）”；

css:

invideo AI

InVideo 使用现成的模板简化视频创建

下载

.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 */
	}
}

相关推荐：

怎么纯用css代码使文字展示闪动效果？（代码示例）

如何使用CSS 和D3实现摆线摇摆的效果动画