盒子动画
简单动画
认识简单动画
简单动画通常称之为“过渡 transition”
CSS属性，在一定时间内，从一个值变化到另一个值
渐变时间函数：transition-timing-function
CSS属性以何种速度进行渐变
贝塞尔曲线：cubic-bezier
贝塞尔曲线是由四个参考点绘制而成的曲线
在CSS中，第一个点和第四个点已固定，用户可以设置第二和第三个点
曲线的纵坐标表示渐变轨迹，横坐标表示时间
示例：transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)
贝塞尔曲线的预设值
ease渐快，匀速，减慢cubic-bezier(0.25,0.1,0.25,1)
ease-in渐快，匀速cubic-bezier(0.42,0,1,1)
ease-out匀速，减慢cubic-bezier(0,0,0.58,1)
ease-in-out和ease类似，但比ease的加速度大（幅度大）cubic-bezier(0.42,0,0.58,1)
linear全程匀速cubic-bezier(0,0,1,1)
复杂动画
涉及到的属性
animation-name：动画名称
animation-duration：单次动画总时长
animation-timing-function：时间函数
animation-delay：播放前延时的时长
animation-iteration-count：播放次数---特殊值：infinite
animation-direction：播放顺序
normal：正常播放、alternate：轮流反向播放
盒子变形
什么是变形
通过变形可以改变盒子的视觉效果
变形不会改变盒子原本的位置和尺寸，因此不会对其他元素造成影响
如何变形
可通过css属性transform对盒子进行变形
变形详解
定义原点
原点的位置会对某些变形产生影响，可通过CSS属性transform-origin设置盒子原点
该属性的默认值是盒子中心，设置方式与background-position非常类似
变形的种类
旋转(rotate)、缩放(scale)、移动(translate)、倾斜(skew)
多重变形。。。。。。。。。。。。。？
其他属性
透视距离：perspective
观察者距离Z轴原点的距离，设置该属性，会制造透视效果，可继承，该属性设置到变形元素的父元素上
背面可见性：backface-visibilityvisible：默认值，背面可见、hidden：背面不可见