动画：
- 动画片、漫画、视频、flash等等会动的画面
- 颜色高度等属性的变化（过渡）
- css3对于动画的实现有过渡和帧动画
css3动画：
- 包括transition 和animation
- 动画常常和transform属性常用[transform不是动画属性,但是它为动画的实现做了贡献。]
- css3动画做一些功能性的菜单按钮
- 宣传用的轮播图，各种页面效果的缓冲
- 页面间的切换过渡，网页小游戏
CSS3动画的扩展：
- Vue-transition
- swiper
- svg
- Animate.css
transition(过渡)基础写法：[更多查看其api,本文只是简单举例不具体说明每个属性的作用]
- 属性名称(property)
- 过渡时间(duration)
- 延迟时间(delay)
- 时间函数(time-function)
注意：
- display不能与transition一起使用【transition需要元素提前在文档中有个初始的属性。而display在等于null的时候它在文档流的初始属性理论上是不存在的虽然它在文档流中已经预设好了，但是浏览器读不到这个元素的任何属性值】
- transition后面尽量不要跟all【transition后面跟all会造成浏览器大量的计算资源。】
- 常见的闪动，可以perspective和backface-visibility【开启3D加速效果的元素】
animation基础写法：[更多查看其api,本文只是简单举例不具体说明每个属性的作用]
- 动画名称(name) [email protected]
- 过渡时间(duration)
- 延迟时间(delay)
- 时间函数(timing-function)
animation是升级版的transition:
- 播放次数(iteration-count)
- 播放方向(direction) 即：是否轮流播放和反向播放
- 停止播放状态(fill-mode)
- 是否暂停（play-state）
时间函数：
- 时间函数线性与非线性
- cubic-bezier(n,n,n,n) [有p1~p4这4个点，但是前2个n是p2的坐标，后2个n是p3的坐标]
线性：
- 时间函数，管理着动画在单位帧内播放的速度曲线
- 它是使用的名为 3次贝塞尔函数的数学函数
- 预设值 linear ease ease-in ease-out ease-in-out
非线性：
- 能够实现动画的阶跃式变化，不是线性的过渡
- Steps(1,start|end)
steps作用的是每个关键帧，不是整个时间
过渡和动画在js中的监听：
- animationstart
- animationend、transitionend
- animationiteration
实例：轮播图和落雨动画实现
Github地址：
https://github.com/LeiLeiOfJava/Carouselmap-and-Rain-CSS3-