animation-fill-mode 有四个值可选，并且允许由逗号分隔多个值。

• none 不改变默认行为。

• forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

• backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

• both 向前和向后填充模式都被应用。

  animation-fill-mode: none;
  animation-fill-mode: forwards;
  animation-fill-mode: backwards;
  animation-fill-mode: both;
  animation-fill-mode: none, backwards;
  animation-fill-mode: both, forwards, none;

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

值

描述

linear

规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,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

规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n)

在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。（贝塞尔曲线）

css动画简写

div{
　　animation: myName 1s linear infinite forwards 1s step(1);
　　-webkit-animation: myName 1s linear infinite forwards 1s step(1);
　　}
@keyframes myName {
0%{
　　transform: rotate(-90deg) scale(.3) translateY(10px);
　　transform-origin: left top;
　　}
100%{
　　transform: rotate(0deg) scale(.3) translateY(0px);
　　transform-origin: left top;
　　}
　　}

transform: none|transform-functions;

值

描述

测试

none

定义不进行转换。

测试

matrix(n,n,n,n,n,n)

定义 2D 转换，使用六个值的矩阵。

测试

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

定义 3D 转换，使用 16 个值的 4x4 矩阵。

 

translate(x,y)

定义 2D 转换。

测试

translate3d(x,y,z)

定义 3D 转换。

 

translateX(x)

定义转换，只是用 X 轴的值。

测试

translateY(y)

定义转换，只是用 Y 轴的值。

测试

translateZ(z)

定义 3D 转换，只是用 Z 轴的值。

 

scale(x,y)

定义 2D 缩放转换。

测试

scale3d(x,y,z)

定义 3D 缩放转换。

 

scaleX(x)

通过设置 X 轴的值来定义缩放转换。

测试

scaleY(y)

通过设置 Y 轴的值来定义缩放转换。

测试

scaleZ(z)

通过设置 Z 轴的值来定义 3D 缩放转换。

 

rotate(angle)

定义 2D 旋转，在参数中规定角度。

测试

rotate3d(x,y,z,angle)

定义 3D 旋转。

 

rotateX(angle)

定义沿着 X 轴的 3D 旋转。

测试

rotateY(angle)

定义沿着 Y 轴的 3D 旋转。

测试

rotateZ(angle)

定义沿着 Z 轴的 3D 旋转。

测试

skew(x-angle,y-angle)

定义沿着 X 和 Y 轴的 2D 倾斜转换。

测试

skewX(angle)

定义沿着 X 轴的 2D 倾斜转换。

测试

skewY(angle)

定义沿着 Y 轴的 2D 倾斜转换。

测试

perspective(n)

为 3D 转换元素定义透视视图。

测试