css3 动画

<style>
div{
				width: 100px;
				height: 100px;
				background-color: red;

            animation: myfirst 5s linear infinite;

}
</style>

animation-name:myfirst; <-- 加载动画时间 -->
animation-duration:1s; <-- 动画加载时间 -->
animation-timing-function:linear; <-- 动画的播放速度为均速 -->
animation-iteration-count:infinte; <-- 播放次数 ，循环播放 -->
animation-delay:2s; <-- 延迟–>
<-- animation: 动画名 完成时间 运行速度 播放次数 -->
<-- animation: myfirst 5s linear infinite; -->

/*语法@keyframes 动画名字  */
			@keyframes myfirst{
				from{
					background-color: red;
				}
				to{
					background-color: green;
				}
			}

/*每个浏览器对动画兼容性都不同，为了保证兼容性，应定义多个版本的动画*/
			@-moz-keyframes myfirst{/*针对火狐浏览器*/
				from{/*开始动画状态*/
					background-color: red;
				}
				to{/*结束动画状态*/
					background-color: green;
				}
			}

@-webkit-keyframes myfirst{/*谷歌和苹果*/
				from{
					background-color: red;
				}
				to{
					background-color: green;
				}
			}