transform：转换，改变元素的外观，有很多方式来改变元素的外观，例如位移（translate），缩放（scale），旋转（rotate），倾斜（skew）等，它没用动画效果，数值改变元素样子立刻改变。
transition：过渡，指的是css的某个属性值如何平滑的改变，就是平常所说的动效

一、transform的使用

1、位移 translate(x,y)，x轴右移是正数，y轴下移是正数。

translate（50px，150px）；//水平方向上移动50px，垂直方向上移动150px

translate（50px）；只有一个参数的时候，默认为水平方向移动

2、rotate(deg)

使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。

3、scale()

4、skewX() ：使元素沿 X 轴倾斜给定角度。

transform：skewX（20deg）；//水平方向上倾斜20度

transform：skewY（20deg）；//垂直方向上倾斜20度，

transform：skew（20deg）；//水平方向上倾斜20度，只用一个参数默认为水平方向

transform：skew（20deg，10deg）；//水平方向倾斜20度，垂直方向倾斜10度

二、transition的使用

transition的基本用法：

transition：[属性名] [持续时间] [速度曲线] [延迟时间]

我们可以很方便的用这个过渡来给某一个属性加上好看的动效。例如，高度属性的值改变时，延迟 0.5 秒后以 ease 曲线进行过渡，持续2秒：

transition:height 2s ease 0.5s

或者一个属性不够，想要监听所有属性。

transition: all 2s ease .5s;

这里的all不是指的所有属性，而是指所有能进行动画过渡的属性，有很多属性是不能进行过渡的，比如display，你不能让一个div的显示模式慢悠悠的发生过渡

有了上面的认识时候搭配:hover等可以引起属性值变化的伪类时就可以很轻松的做出一个动画效果：

.box {
    width: 10px;
    transition: width 0.4s ease;
}

.box:hover {
    width: 50px;
}

如果你想给多个属性指定同一个过渡的时候该怎么做？如下：同时监听宽度和高度进行过渡

transition-property: width, height;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: .5s;

这四个属性就相当于简写的四个属性，但是，千万不要简写成这样！会报错的。

transition: height, width 2s ease .5s;

因为逗号前，必须是一个完整的动画描述

如果想指定height的过渡为2s，width的过渡为3s该怎么做呢？如下：

transition-property: height, width;
transition-duration: 2s, 3s;

这么写确实可以，第1个逗号前的为一组，第二个逗号前的为另一种...但是如果写的属性比较多的话，岂不是要开始数逗号了？所以我们可以用更方便的写法简写一下：

transition: height 2s, width 3s;