transition过渡动画

transition:样式名 时间 动画类型 延时;
JavaScript 语法：object.style.transition=”width 2s”
参数
样式名：为all时，代表规定的所有样式一起发生改变。
时间：指完成动画的时间。以秒为单位
动画类型：动画的过渡效果。如：
linear，规定以相同速度开始至结束的过渡效果。
ease，规定慢速开始，然后变快，然后慢速结束的过渡效果。
延时：规定多少时间后执行动画。以秒为单位，可以省略此参数。

transition-property: none|all|property; 规定设置过渡效果的 CSS 属性的名称。
none 没有属性会获得过渡效果。all 所有属性都将获得过渡效果。property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
transition-duration: time; 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function: 属性规定过渡效果的速度曲线。
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 之间的数值。
transition-delay:time; 定义过渡效果何时开始,值以秒或毫秒记。
也可以这样写
transition-property：长，宽，高；
transition-duration：1s, 2s,3s;列对应

3D动画

transform

属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
JavaScript 语法：object.style.transform=”rotate(7deg)”

值 描述 测试
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 转换元素定义透视视图。 测试

perspective

object.style.perspective=500
属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

perspective-origin

perspective-origin：x轴上的位置 y轴上的位置;
object.style.perspectiveOrigin=”10% 10%”
值：left | center | right| length | %
属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。

transform-origin

transform-origin: x轴上的位置 y轴上的位置 z轴上的位置;
object.style.transformOrigin=”20% 40%”
x&y的值 left | center | right| length | % z的值 length
性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
注释：该属性必须与 transform 属性一同使用。