CSS3 动画

CSS3 动画

---

1、什么是动画

​ 动画是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或一组动画，从而实现复杂的动画效果。

​ 通俗来讲，动画就是使元素从一种样式逐渐变化为另一种样式的效果，同时你可以改变任意多的样式任意多的次数。

2、动画的使用

• 先定义动画

语法格式：

@keyframes 动画名称 {
	0% {
		width: 100px;
	}
	100% {
		width: 200px;
	}
}

• 再调用动画

div {
	/*调用动画*/
	animation-name: 动画名称;
	/*持续时间*/
	animation-duration: 持续时间;
}

3、动画序列

• 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
• 在@keyframes中规定某项CSS样式，就由创建当前样式逐渐改变为新样式的动画效果
• 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
• 用百分比来规定变化发生的时间，或用from和to，等同于0%和100%

4、动画常见属性

5、速度曲线细节

animation-timing-functiom：规定动画的速度曲线，默认使ease

6、动画简写

animation: name duration timing-function delay iteration-count direction fill-mode
/*
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 启示与结束状态
*/

7、知识要点

• 简写属性里面不包含animation-paly-state动画的运行和暂停
• 暂停动画animation-play-state:paused;经常和鼠标经过等其他配合使用
• 要想动画走回来，而不是直接调回来：animationdirection:alternate动画在下一周期反方向播放
  他配合使用
• 要想动画走回来，而不是直接调回来：animationdirection:alternate动画在下一周期反方向播放
• 盒子动画结束后，停在结束的位置：animation-fill-mode:forwards