animation-fill-mode

规定动画在播放之前或之后，其动画效果是否可见。

  1. none:（默认），停止在起始位置，延迟时间过后添加0%的初始效果
  2. backwards：停止在起始位置，延迟前便添加0%的效果
  3. forwards：运动结束，停止在100%的位置

  4. both：backwards和forwards同时添加

    animation-direction

    属性规定是否应该轮流反向播放动画

  5. alternate:执行一次：0% ——>100% 执行下一次：100%——>0%

  6. normal: （默认）执行一次：0%——>100%

  7. 执行下一次：0%——>100%

    animation.css库

  8. 基类： animated

  9. 无限次： infinite

  10. 具体类： tata，flash等

    transform3D相关属性

  11. rotateX()： 沿着X轴旋转

  12. rotateY(): 沿着Y轴旋转
  13. translateZ()：沿着Z轴进行位移，正值向前，负值向后
  14. scaleZ():对立体图形的厚度进行缩放

  15. perspective： 景深；离屏幕多远的像素去观察元素，值越大，幅度越小

    注：尽量把景深加给不动的元素，这样景深也不会发生位置的变化，一般就是加给父元素

  16. perspective-origin：景深的基点位置

    left right top bottom
    .transform-style:3D空间
    flat（默认的）
    preserve-3d（3d的，如果想让元素产生厚度需要添加）
    backface-visibility：背面隐藏
    hidden（隐藏的）
    visible（默认的，不隐藏）
    transform-origin : x(center|num) y(center|num) z(num)
    .3d写法：
    1. scale3d(x,y,z)
    2. translate3d(x,y,z)
    3. rotate3d(1,0,0,30deg) : 前三个参数为 0或1 , 0表示不添加旋转角度 1表示添加旋转角度
    示例 : rotate3d(1,0,0,30deg) === rotateX(30deg)
    rotate3d(0,1,0,30deg) === rotateY(30deg)
    rotate3d(0,0,1,30deg) === rotateZ(30deg)
    rotate3d(1,1,1,30deg) === rotateX(30deg) rotateY(30deg) rotateZ(30deg)