CSS3 动画（animation）

CSS3 动画

1.动画的基本使用

制作动画步骤：

1. 先定义动画

   • 用keyframes定义动画（类似定义类选择器）

   @keyframes 动画名称 {
       /* 开始状态 */
   	0% {
   		width: 100px;
   	}
       /* 结束状态 */
   	100% {
   		width: 200px;
   	}
   }
   

2. 再使用（调用）动画

div {
	width: 200px;
	height: 200px;
	background-color: aqua;
	margin： 100px auto;
	/* 调用动画 */
	animation-name: 动画名称;
	/* 持续时间 */
	animation-duration: 持续时间;
}

2. 动画序列

3. 动画常用属性

4. 动画简写属性

5. 速度曲线细节