你不知道的css3 transition animation transform

    transition： 过渡，状态改变的时候触发,前提是css属性支持动画
    transition-property：监听动画的属性 默认 all， 有all, 或者是css的属性,width，height等
    transition-duration: 动画时长， 1s 单位是s
    transition-timing-function: 运动的曲线(默认 ease)， 有linear（线性平滑）, ease(平滑过渡), ease-in（由慢到快） ease-out(由快到慢 ) ease-in-out(由慢到快在到慢) 等 贝塞尔曲线
    transition-delay:动画延迟时间 默认0 单位s
    cubic-bezier: 三次贝塞尔曲线
    cubic-bezier(x,y,x1,y1) 必须四个参数，两个点。贝塞尔曲线的起点（0，0），终点（1，1）固定的
    cubic-bezier的公式为： B(t) = P0(1 -t)^3 + 3P1t(1 - t)^2 + 3P2t^2(1 - t) + P3t^3    t属于[0, 1]; (P0, P1, P2, P3是贝塞尔曲线的四个点，p0 是七点（0，0）坐标， P3是终点（1，1）坐标, P1, P2是控制曲线的坐标)
    x轴的值只能是0到1，y的值可以正值，可以负值
    animation: 动画 可以实现多状态的动画 在同一个animation里面可以写多个动画
    @keyframes: 动画容器。使用百分比来做。每一个百分比代表一个关键帧，每一个关键帧的值（百分数）,代表允许总时间的长度， 0%可以换成from, 100%可以换成to
    animation-name: 动画名称,使用关键帧的名字
    animations-duration: 动画运行的时间，单位为s
    aimation-timing-function； 与transition里面的属性是一样的， 设置的是动画每一帧的动画都是使用该动画轨迹, css3办不到每一帧动画不一样
    animation-delay: 动画延迟执行的时间
    animation-iteration-count: 动画执行的次数， infinate(无限)
    animation-direction: 动画执行的方向 默认（normal） normal（正常方向，顺时针） reverse(反向，逆时针) alternate(动画先正常运行，然后在反向运行，交替进行，这个必须要设置animation-iteration-count的值大于2) alternate-reverse(动画先反向运行，然后正向运行，交替进行这个必须要设置animation-iteration-count的值大于2)
    animation-play-state: 动画的状态， 有: paused(停止)  running 不适用，兼容性差并且未来可能会去掉
    animation-fill-mode: 默认（none） 动画 none(无) forward(动画结束后保存最后一帧的状态) backwards(动画开始之前使用第一帧的状态) both(有forward和backwords的状态)
    step: 是animation-timing-function里面的一个属性 配合animation动画，直接跳转，没有过渡，会等待动画执行的时间
    animation-timing-function:steps(n, end/start) 第一个参数是步数 n是每一帧中多少步跳转 
    第二个参数： end 保留当前帧状态，直到下一个动画结束(忽视最后一帧 用forwards弥补)   start: 保留下一帧状态，直到这段动画结束（忽略第一帧状态,弥补不了缺陷）
    steps(1, end) === step-end
    steps(1, start) === step-start
    transform: 变换
    transform-origin: center center (默认) 变换中心,参照中心, 可以填写三个值，代表空间上的中心点,已该点来变化
    roate() 默认2D  里面的值需要加上单位 deg
    rotateX() 绕X轴翻转
    rotateY() 绕Y轴翻转
    rotateZ() 绕Z轴翻转 垂直屏幕的  三个方向旋转，每个轴的方向也会改变
    rotate3d 设计一个矢量的 rotate3d(x,y,z, angle) xyz是矢量值， 比值很重要， angle是三个矢量方向的为轴,进行空间旋转 旋转angle的度数
    scale: 伸缩 伸缩的不是元素本身大小，而是此元素变化坐标轴的刻度 scale() 可以叠加操作，后面的值不会覆盖，而是叠加
    scale(x, y) 2D x轴和Y的伸缩或者扩张 大于1的时候扩张 小于1的时候缩放
    scaleX()
    scaleY()
    scaleZ()
    scale3d(x, y, z)
    注意： 变化后的scale() 会保留影响，并且scale()里面的值会被重叠
    skew:  只有2d 倾斜 默认值是（0，0） 倾斜的不是元素本身，而是倾斜的是坐标轴， 值写在x轴上， 但是倾斜的是y轴， 高度不变。高度被拉伸了
    skewx()
    skewy()
    translate(x,y)
    translateX()     这三种写法是用于移动2D的
    translateY()
    translate3d() 3d 
    perspective： 默认null  景深 眼睛到屏幕的纵深的值， 想要景深起作用，必须要设置在父级上，子级才会起作用,
    perspective 看到的是投影，有translateZ 才能看得到投影出来的元素会进行变化， 没有translateZ 看到的投影永远都不变
    perspective-origin: center, center 眼睛的位置
    transform： perspective() 这个景深只能加到自身上面，写在父级上面不起作用,用于显示多个元素的景深一样的时候使用。 不能设置眼睛的位置，只能是center，center， 景深可以叠加
    transform-style: presever-3d 保存3d空间, 需要在直接父级上加才可以
    设置了perspective， 和transform-style, 可以用于position的参照物
    matrix: 矩阵
    | a, c, e|         | x |       | ax + cy + e |
    | b, d, f|   *     | y |   =   | bx + dy + f |
    | 0, 0, 1|         | 1 |       | 0  + 0  + 1 |
    矩阵中是前一个行与后一个列相乘后相加， 后一个有多少列那么结果就有多少列
    2d 平移 translate：
    | a, c, e|         | x |       | x + e |
    | b, d, f|   *     | y |   =   | y  +f |
    | 0, 0, 1|         | 1 |       |  1 |
    | x + e|     | x |
    | y + f|  与 | y |  这两者对比我们知道，x偏移e个单位， y偏移f个单位 是translate的2d平移变化 所以得出 a, b, c ,d 四个值为 1, 0, 0, 1  
    | 1    |     | 1 |  matrix（1，0，0，1, e , f） = translate(x, y); e与x相同， f与y相同
     2d 缩放 scale：
    | a, c, e|         | x |       | （）x |
    | b, d, f|   *     | y |   =   | （）y |
    | 0, 0, 1|         | 1 |       |  1 |
    根据矩阵的计算发着，可以得出第一个（）里面是a , 第二个括号里面是d
    所以得出a, b, c, d, e, f 结果是 a = a, b = 0, c = 0, d = d, e = 0, f = 0
    所以 matrix(a, 0, 0, 0, d, 0, 0) = scale(x, y) 其中a = x, d = y。 实现2d缩放
    同理： 
    3d 的需要4 * 4 的矩阵
    matrix(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1) 缩放
    matrix(x, 0, 0, 0, 0, y, 0, 0, 0, 0, z, 0, 0, 0, 0, 1) 平移
 -->