CSS动画
制作动画分两步(相当于类选择器，先定义好样式，再通过类名调用)
● 1.定义动画
● keyframes意为关键帧。动画序列0%~100%也可以写成from···和to···。此外，动画序列不仅只能设置两个状态，可以实现多个状态变化，如：0%~25%~50%~75%~100%，这里的百分比是对总时间的划分
● 2.使用(调用)动画
动画的常见属性
animation-name规定动画的名称(必须)
animation-duration规定动画完成一个周期的时间(秒/毫秒)(必须)
animation-timing-function规定动画的速度曲线，默认值为ease
● ease低速开始，然后加快，结束时变慢
● linear匀速
● ease-in低速开始
● ease-out低速结束
● ease-in-out低速开始和结束
● steps()指定时间函数中的间隔数量(步长)
● 如设置steps(5)，则动画将分5部完成
● animation-delay规定动画何时开始，默认为0
● animation-iteration-count规定动画的重复次数，默认为1，设置为infinite则无限循环
● animation-direction规定动画是否反方向播放，默认为normal，设置为alternate则逆向播放
● animation-fill-mode规定动画结束后的状态，默认为backwards回到初始状态，设置为forwards则保持在结束状态
● animation-play-state规定动画是否正在进行或者暂停，默认是running。若设置paused，则动画停止不动，可以配合:hover来设置鼠标悬浮则停止
● 动画属性的简写-->animation: 动画名称 持续时间 运动曲线 何时开始播放次数 是否反方向 是否保持结束的状态
● 例：animation: move 1s linear 0s 1 alternate forwards
● 这其中动画名称和持续时间是必须写的属性，其他的可以保持默认
3D转换
3D位移translate3d(x,y,z)，也可以对应坐标轴设置transform: translateX() translateY() translateZ(); 注意每个方向用空格隔开，但是不能分开单独写三个transform，以为后写的会覆盖前面的
● 注意：z轴的位移是看不到的，要加入透视perspective属性才能看到
3D旋转rotate3d(x,y,z,旋转角度)，可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴来旋转。x,y,z是旋转轴的矢量，表示是否沿着这条轴旋转(如 transform: rotate3d(1,0,0,45deg)表示沿着x轴旋转45度; transform: rotate3d(1,1,0,45deg)表示沿着对角线旋转45度)
● 判断元素沿x轴旋转时的正方向
● 判断元素沿y轴旋转时的正方向
透视perspective(单位为px)，也叫视距，加了透视的页面元素在变化时就会呈现立体感(非常中要)
● 注意：透视要写在被观察元素的父盒子上面(通常写在body里)
● 透视是模拟人的眼睛，有近大远小的效果。当透视(视距)越小，元素到人眼的距离越小(越近)，看到的元素就越大；视距越大，元素到人眼的距离越大(越远)，看到的元素就越小。
● 当视距固定时，元素向z轴正向移动，就越来越大；元素向z轴负方向移动就越来越小
3D呈现transform-style(非常重要)
控制子元素是否开启三维立体环境
● transform-style: flat; 默认值，不开启三维立体环境
● transform-style: preserve-3d;开启子元素三维立体环境
● 注意：transform-style属性要写在父盒子内，影响的是子元素
做3D时，透视perspective和3D呈现transform-style: preserve-3d;必不可少！！！
注意！！！只要是写transform属性不管是2D还是3D，在同一个元素上使用时一定要用简写！如: transform: translate(x,y) rotate3d(x,y,z,deg);同时实现两种变化，不能拆开写两个transform，这样后面的transform会覆盖前面的，导致前面的失效
