一、过渡
过渡：从一种状态（CSS效果）缓慢进入另一种状态（CSS状态）
（1）transition
transition-duration:过渡时间
单位：s/ms 秒/毫秒 1s=1000ms
默认：0s 没有过渡
（2）transition-property:指定过渡样式
none：没有样式需要过渡
all：所有样式都需过渡
propertys：代表需要过渡的样式列表
样式名称与样式名称之间用逗号隔开
（3）transition-delay:延迟过渡
单位：s/ms 秒/毫秒 1s=1000ms
默认：0s 没有过渡
（4）transition-timing-function:过渡变换的速度函数
linear:从开始到结尾都是匀速过渡
ease-in：从慢到快
ease-out：从快到慢
ease-in-out：从慢到快，再从快到慢
（5）贝塞尔曲线
cubic-bezier:自定义曲线
（6）简写
transition：duration delay property timing-function
过渡时间与延迟时间同时存在时，第一个时间代表过渡时间，
第二个时间代表延迟时间
必须写过渡时间，否则不会有过渡效果
transition:可以写在原始状态和目标状态中
写原始状态中，来回都有过渡
写在目标状态中，只有目标状态有过渡
二、形变
元素的2D或3D的转换，对元素进行位移、旋转、缩放或倾斜。
transform：形变函数（参数）列表
形变函数之间用空格隔开
形变函数之中的参数用逗号
形变函数可以同时存在多个
注意：一个选择器中不能有多个transform，有会使用最后一个。
形变与过渡相结合时：
尽量保持元素形变函数和目标样式的形变函数一致
scale会影响过渡效果的有无
（1）2D
1.位置：translate
translateY(m)：Y轴移动，单位px，正下负上
translateX(m)：X轴移动，单位px，正右负左
不分大小写
translate（x,y）：
只有一个值：代表X轴移动
两个值：同时X轴与Y轴移动
2.旋转：rotate
rotate(n deg)单位deg，角度
正数：沿Z轴顺时针旋转
负数：沿Z轴逆时针旋转
4.缩放：scale
scale(m):
0~1:缩小
1~正无穷：放大
负无穷~0：反转缩放
1个值：水平垂直方向同时放大缩小
2个值：x,y方向同时按指定值进行放大缩小
scaleX(m)：水平方向缩放
scaleY(m)：垂直方向缩放
4.倾斜：skew
skewX(m)：沿X轴倾斜，正值：上左下右，负值：上右下左
skewY(m)：沿Y轴倾斜，正值：上左下右，负值：上右下左
skew(m,n)：
1个值：沿X轴方向倾斜
2个值：同时沿X轴，Y轴倾斜
5.形变的参照点：transform-origin
关键字：
水平：left center right
垂直： top center bottom
只写一个方向，另一个方向默认为center
px：
%：
注意：写在起始状态中
（2）3D
perspective:视距，代表默认情况下，物体离眼睛的距离
1.平移：transform:translate
位置:translateZ(m)：Z轴平移
正值：物体越来越接近眼睛，超过视距则看不见
负值：物体越来越远离眼睛，值越小，物体看起来越小
2.旋转：
rotateX()：沿着X轴旋转
rotateY()：沿着Y轴旋转
rotateZ()：沿着Z轴旋转
注意：需要在3D状态下，才看得出有3D效果，
即transform-style需设置为preserve-3d
transform-style:设置当前元素是否具有3D空间，在需要设置3D效果的父元素 上添加
preserve-3d：具有3D空间，子元素有3D效果
flat：平面，子元素没有3D效果
transform：rotate3d(X,Y,Z,n deg)
参数1：X
参数2：Y
参数3：Z
参数4：沿着X,Y,Z轴的向量旋转
3.缩放
scaleZ(m)：让本身子元素在Z轴上伸缩
本身的厚度不会发生任何改变
4.单个div不可以设置正反面背景
实现正反面背景，通过伪装变化实现，设置原始和hover之后的 z-index来显示正反面替换效果
三、动画
（1）创建动画片段
@keyframes 动画片段名称{
from{原始样式}
to{目标样式}
}
@keyframes 动画片段名称{
0%{样式}
50%{样式}
100%{样式}
}
百分数：0~100，一次动画时间中占总时间的百分数
（2）执行动画
animation-name:动画片段名称
animation-duration:一次动画的时间
animation-iterration-count:动画执行的次数
infinite:无数次
animation-direction:动画执行的方向
normal:正常 从 from到 to
reverse:反向 从 to 到 from
alternate： 正反向，交替来回执行，从 from 到 to ， to 到 from
alternate-reverse: 从 to 到 from ，从 from 到 to
animation-timing-function:动画执行的速度函数
linear,ease-in,ease-out,ease-in-out,ease
animation-play-state:动画执行的状态
running:执行动画
paused:暂停动画
简写：
animation:name duration delay iteration-count timing-function play-state direction
注意：不能省略name和duration
animation:动画信息项，动画信息项，动画信息项……
可以同时播放多个动画片段