一、transform（变形）
transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
它一般需要配合transition(过渡)使用。inline元素不支持，需要先转换成block元素。
1. translate（位移）
translate 允许你单独声明平移变换，并独立于 transform 属性。这在一些典型的用户界面上更好用，而且这样就无需在 transform 中声明该函数并记住转换函数的确切顺序了。
2. scale（缩放）
scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。语法：
transform: scale(sx,sy)
sx表示缩放向量的横坐标。 sy表示缩放向量的纵坐标。如果sy未设置，则他的默认值被设置为 sx。 从而使得元素在保持原有形状下均等缩放
scale() 仅适用于二维平面上的变换。如果需要进行空间中的缩放，必须使用 scale3D() 。
3. rotate（旋转）
rotate()函数定义了一种将元素围绕一个定点旋转而不变形的转换。
指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转180°也被称为点反射。 元素旋转的固定点也称为变换原点，这默认为元素的中心，但你可以使用transform-origin属性设置自己的自定义变换原点。
例子：transform: rotate(45deg);
4. skew（倾斜）
skew() 函数定义了一个元素在二维平面上的倾斜转换。这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。
skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量：
skew(ax)
skew(ax, ay)
复制代码ax表示用于沿横坐标扭曲元素的角度。ay表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为0，导致纯水平倾斜。
二、transition（过渡）
transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。
比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色（补充中间帧），按照一定的曲线速率变化。这个过程可以自定义。
语法：transition: 属性名 时长 过渡方式 延迟
1. 属性名（transition-property）
指定哪个或哪些 CSS 属性用于过渡（all代表所有属性）。可用逗号分隔两个不同的属性：
transition:left 20ms,top 400ms
2. 时长（transition-duration）
指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。
3. 过渡方式（transition-timing-function）
指定一个函数，定义属性值怎么变化。
常见方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
4. 延迟（transition-delay）
指定延迟，即属性开始变化时与过渡开始发生时之间的时长。
三、animation
CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。
动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。
缩写语法：animation：时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
1. 时长（animation-duration）
设置动画一个周期的时长。
2. 过渡方式（animation-timing-function）
定义CSS动画在每一动画周期中执行的节奏。
常见方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
3. 延迟（animation-delay）
设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
4. 次数（animation-iteration-count）
设置动画重复次数， 可以指定infinite无限次重复动画。
5. 方向（animation-direction）
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行：
normal每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。alternate动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代 。reverse反向运行动画，每周期结束动画由尾到头运行。alternate-reverse反向交替， 反向开始交替 动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
6. 填充模式（animation-fill-mode）
设置CSS动画在执行之前和之后如何将样式应用于其目标：none | forwards | backwards | both
7. 是否暂停（animation-play-state）
8. 动画名（animation-name）
指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。
