transform 、transition、animation区

transform  :

transform是静态属性，非动画属性，和margin-left、margin-top类似。

    translate：平移，类似position:relative;translate()分三种情况：

    1、translate(x, y) // 水平、垂直方向移动

    eg:transform:translate(200px,300px);

   2、translate3d(x,y,z)

    3、translateX(x)

    4、translateX(x)

    5、translateY(y)

    6、translateZ(z)

    7、scale(x,y)//定义 2D 缩放转换。

        eg:transform:scale(0.5,0.5);

    8、scale3d(x,y,z)

    9、scaleX(x)

    10、scaleY(y)

    11、scaleZ(z)

    12、rotate(angle) //定义 2D 旋转，在参数中规定角度。

        eg:transform:rotate(90deg)

    13、rotate3d(x,y,z,angle) 定义 3D 旋转。

    14、rotateX(angle)

    15、rotateY(angle)

    16、rotateZ(angle)

    17、skew(x-angle,y-angle) //定义沿着 X 和 Y 轴的 2D 倾斜转换。

        eg:transform:skew(30deg,30deg)

    18、perspective(n) //为 3D 转换元素定义透视视图。

    19、matrix：将所有的2D效果全部组合在了一起使用

transition

animation的简化版本

transition: all 1s ease 0; // 过渡效果的css属性名称、过渡效果时间、速度曲线、延迟时间

animation

animation: move 1s ease 0 infinite alternate; // keyframe名字、过渡效果时间、速度曲线、延迟时间、循环次数、是否轮流反向播放动画

定义keyframe：@keyframes name {}

transition和animation做动画

常和transfrom配合使用，区别如下：