3D动画

动画，我们都知道是由一帧一帧的静态画面拼接起来的，那在CSS中，动画也是拼接起来的，从这个状态到另一个状态，然后把它拼接起来，就形成了3D动画animation。
在了解动画之前，首先要知道transition过渡属性，就是给属性添加过渡的效果，让动画看起来不那么生硬

先看一个简单的案例：

在这个案例中，添加了hover事件，通过hover事件来改变box的宽度和背景，当我们给box添加了transition以后，box改变的状态就是随着时间慢慢滑过。
那我们能不能不给他触发事件就能让box改变呢，这就是transition和animation的区别，transition需要触发一个事件才会随时间改变元素的css属性，而animation不需要触发任何事件，也可以随着时间变化来改变元素css的属性值，从而达到一种动画的效果。
在这里要知道animation的几个基本的属性值：
1、 animation-name 动画名称，必须与@keyframes配合使用；
2、 animation-duration 动画的持续时间，是以s、ms来计时的；
3、 animation-delay 动画延迟的时间，是以s、ms来计时的；
4、 animation-timing-function 动画的过渡类型；有线性过渡（linear）、匀速过渡（ease）、由慢到快过渡（ease-in）、由快到慢过渡（ease-out）等；
5、 animation-iteration-count 动画的循环次数；无限循环（infinite）、循环的次数（number）；

通过上图的代码，元素在打开浏览器的时候就能自动从宽度100px，背景为黄色，变成宽度200px，背景为蓝色；

那只能让元素平移吗？当然不是，我们还可以通过transform下的属性进行旋转、缩放、位移、倾斜等。

通过上图代码，就可以实现元素的旋转；
还可以设置transform：translate（）位移；transform：scale（）缩放，transform：skew（）倾斜等；