css3 动画主要由 animation@keyframes 组成

animation 具体属性值

animation-name 规定 @keyframes 动画的名称

.box{
	animation-name : keyframes-name;
}

animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0

不能为 0, 当等于 0 时看不到任何动画效果
.box{
	animation-duration : 1s; /*  0.1s 不足 1 秒时可用写为小数 */
}

animation-timing-function 规定动画的速度曲线。默认是 “ease”

.box{
	animation-timing-function: value;
}

value : linear                 动画从头到尾的速度是相同的
        ease                   默认。动画以低速开始,然后加快,在结束前变慢
        ease-in                动画以低速开始
        ease-out               动画以低速结束
        ease-in-out            动画以低速开始和结束
        cubic-bezier(n,n,n,n)  在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

animation-delay 规定动画何时开始。默认是 0

此属性可用用来设置动画延迟执行
.box{
	animation-delay : 1s; /*  0.1s 不足 1 秒时可用写为小数 */
}

animation-iteration-count 规定动画被播放的次数。默认是 1

.box{
	animation-iteration-count: number;
}

number : infinite    动画无限循环
         n           动画的播放次数

animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”

定义动画是否循环交替反向播放

.box{
	animation-direction: value;
}

value : normal                 默认值, 正常播放
        reverse                动画反向播放
        alternate              动画为基数时正向播放, 偶数时反向播放
        alternate-reverse      动画为偶数时正向播放, 基数时反向播放
        initial                默认值
        inherit                继承

animation-play-state 规定动画是否正在运行或暂停。默认是 “running”

用来控制动画暂停与播放, 默认播放
.box{
	animation-play-state: paused | running;
}

paused    暂停
running   播放
	
<style type="text/css">
	@keyframes myfirst{
		/* 设置元素运动轨迹 */
		0%,100% {
			background: red;
		}
		50% {
			background: yellow;
		}
	}
	@-webkit-keyframes myfirst{
		0%,100% {
			background: red;
		}
		50% {
			background: yellow;
		}
	}
	.box{
		margin: 50px auto;
		width: 100%;
		max-width: 500px;
		min-width:100%; 
		height: 300px;
		border :  1px solid #d1d1d1;
		padding: 20px;
	}
	#myfirst{
		width: 100%;
		height: 100%;
		/* 定义动画属性 */
		animation: myfirst 4s linear infinite normal running;
		-webkit-animation: myfirst 4s linear infinite normal running;
	}
	#myfirst.stop{
		/* 暂停动画 */
		animation-play-state: paused;
	}
</style>

	
<div class="box">
	<div id="myfirst"></div>
</div>