CSS3 动画序列

@keyframes move {
	/* 开始状态 */
	0% {
		transform: translateX(1000px);
	}
	/* 结束状态 */
	100% {
		transform: translateX(100x);
	}
}
div {
	width: 200px;
	height: 400px;
	background-color: hotpink;
	
	/* 动画名称 */
	animation-name: move;
	/* 持续时间 */
	animation-duration: 3s;
}

@keyframes move {
	from {
		transform: translate(0,0);
	}
	
	to {
		transform: translate(1000px,0);
	}
}

div {
	width: 100px;
	height: 100px;
	background-color: hotpink;
	animation-name: move;
	animation-duration: 2s;
}

@keyframes move {
		/* 1.可以做多个状态的变化 keyframe 关键帧 */
		/* 2.里面的百分比要是整数 */
		/* 3.里面的百分比就是 总的时间 （我们这个案例10s) 的划分 */
		0% {
			transform: translate(0,0);
		}
		25% {
			transform: translate(1000px,0);
		}
		50% {
			transform: translate(1000px,500px);
		}
		75% {
			transform: translate(0,500px);
		}
		100% {
			transform: translate(0,0);
		}
	}
	
	div {
		width: 100px;
		height: 100px;
		background-color: hotpink;
		animation-name: move;
		animation-duration:10s;
	}