transition 过渡
transition 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。transition 可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。
| 属性 | 含义 |
|---|---|
| transition-property | 指定应用过渡属性的名称 |
| transition-duration | 以秒或毫秒为单位指定过渡动画所需的时间，默认为0s |
| transition-timing-function | 用来描述 transition-property 中间值是怎样计算的, 默认 ease, 可选 ease-in，ease-out，ease-in-out，linear，step-start，step-end，steps(4, end)，inherit，cubic-bezier(0.1, 0.7, 1.0, 0.1) |
| transition-delay | 规定了在过渡效果开始作用之前需要等待的时间, 默认0s |
在符合标准的浏览器中，transition效果结束时会触发 transitionend(propertyName, elapsedTime) 事件
transform 转变
transform 属性允许你旋转，缩放，倾斜或平移给定元素。可以指定为关键字值 none 或一个或多个 <transform-function> 值。
<transform-function> CSS数据类型用于对元素的显示做变换。通常，这种变换可以由矩阵表示，并且可以使用每个点上的矩阵乘法来确定所得到的图像。在CSS（和大部分的计算机图形学）中，原点 (0, 0) 在元素的左上角。
| transfrom-function | 含义 |
|---|---|
matrix(a, b, c, d, tx, ty) |
matrix() 用六个指定的值来指定一个均匀的二维（2D）变换矩阵。 |
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) |
matrix3d() 用一个 4 × 4 的齐次矩阵来描述一个三维（3D）变换。 |
perspective(l) |
perspective() 函数定义了 z=0 平面与用户之间的距离，以便给三维定位元素一定透视度。 |
rotate(a) |
rotate() 函数定义一个旋转属性，将元素在不变形的情况下旋转到不动点周围。 |
rotate3d(x, y, z, a) |
rotate3d() 函数定义一个3D旋转功能，该旋转使元素能够绕固定轴移动而不变形。 |
rotateX(a) |
rotateX() 函数定义了将元素在横坐标上旋转而不使其变形的方法。 |
rotateY(a) |
rotateY() 函数定义了将元素在纵坐标上旋转而不使其变形的方法。 |
rotateZ(a) |
rotateZ() 函数定义了将元素在z轴上旋转而不使其变形的方法。 |
scale(sx) scale(sx, sy) |
scale() 函数可改变元素的大小。 它可以增大或减小元素的大小，并且缩放量由矢量定义，并且它可以使在一个方向上比另一个方向更多。 |
scale3d(sx, sy, sz) |
scale3d() 函数可改变元素的大小。由于缩放的量由矢量定义，因此可以改变不同方向的尺寸。 |
scaleX() |
scaleX() 函数是用一个常数因子来修改每个单元点的横坐标，在比例因子是1的情况下该函数是恒等变换。 |
scaleY() |
scaleY() 函数用一个常数因子修改每个元素点的纵坐标，在比例因子是1的情况下该函数是恒等变换。 |
scaleZ() |
scaleZ() 函数是用一个常数因子来修改每个单元点的z轴坐标，在比例因子是1的情况下该函数是恒等变换。 |
skew(ax) 或 skew(ax, ay) |
skew() 函数是一种用于拉伸，或者说是平移，该函数会使得在每个方向上扭曲元素上的每个点以一定角度。 |
skewX(a) |
skewX() 函数是用于水平拉伸，它将元素的每个点在水平方向上扭曲一定角度。 |
skewY(a) |
skewY() 函数是用于垂直拉伸，它将元素的每个点在垂直方向上扭曲一定角度。 |
translate(tx) 或 translate(tx, ty) |
translate() 函数用于移动元素在平面上的位置。 |
translate3d(tx, ty, tz) |
translate3d() 函数用于移动元素在3D空间中的位置。 |
translateX(t) |
translateX() 函数用于在平面上水平移动元素。 |
translateY(t) |
translateY() 函数用于在平面上垂直移动元素。 |
translateZ() |
translateZ() 函数用于3D空间的z轴方向移动元素， 这个转换的特点是通过 <length> 定义了它的z轴方向移动量。 |
animation 动画
animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。用来指定一组或多组动画，每组之间用逗号相隔。
| 属性 | 含义 |
|---|---|
| animation-name | 指定应用的一系列动画，每个名称代表一个由 @keyframes 定义的动画序列。默认 none。 |
| animation-duration | 指定一个动画周期的时长。默认值为0s，表示无动画。 |
| animation-timing-function | 定义CSS动画在每一动画周期中执行的节奏。默认为 ease。 |
| animation-delay | 定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。默认为0。 |
| animation-iteration-count | 定义动画在结束前运行的次数 可以是1次/无限循环（infinite） |
| animation-direction | 指示动画是否反向播放。默认为 normal。只可以为: normal（正向） reverse（反向） alternate（交替反向） alternate-reverse（反向交替） |
| animation-fill-mode | 设置CSS动画在执行之前和之后如何将样式应用于其目标。默认为none。只可以为: none（当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素） forwards（目标将保留由执行期间遇到的最后一个关键帧计算值） backwards（动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值） both（动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性） |
| animation-play-state | 定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行，它的值可以被设置为暂停和恢复的动画的重放。默认值 running。只可以为: running(当前动画正在运行) paused(当前动画已被停止) |
animation 属性通常需要和关键帧 @keyframes 配合来使用，关键帧 @keyframes 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。和 过渡 transition 相比，关键帧 @keyframes 可以控制动画序列的中间步骤。
要使用关键帧, 先创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 属性将动画同其关键帧声明匹配。每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。
例如：
1 | /* 如果一个关键帧规则没有指定动画的开始或结束状态，浏览器将使用元素的现有样式作为起始/结束状态。 */ |
