一、css3的过渡属性：
1，transition-property
检索或设置对象中的参与过渡的属性。
2，transition-duration
检索或设置对象过渡的时间。
3，transition-delay
检索或设置对象延迟过渡的时间。
4，transition-timing-function
检索或设置对象过渡的动画属性。
简写方法：
transition:属性值1 属性值2 属性值3 属性值4；
属性值1：需要参与过渡的属性/all（默认值）
能支持过渡的属性都会被选中进行过渡变换。
属性值2：过渡的时间，单位（s ms ）（动画持续多久的时间）
属性值3：延迟的时间，单位（s ms）（鼠标放上去延迟的时间，延迟后开始过渡）
属性值4：动画的类型（匀速/linear 匀加速 匀减速 先加速后减速 贝塞尔曲线 。。。）
需要注意的地方：transition 必须通过鼠标事件触发，例如：鼠标滑过 ：hover
有了过渡属性，我们还差的就是过渡的动画了，有平移 旋转 放大 缩放 等。这些动画都是在一个2D的平面空间内完成的，这里用到的变形属性就是transform了。
css3-2D位移：
transform:translate(参数1 参数2);（参数就是在坐标轴XY轴上的距离，当然可以为负数，正值往右向下，负值往左向上。）
参数1：在坐标轴X轴移动的距离
参数2：在坐标轴Y轴移动的距离
单独设置X/Y：transform:translateX/Y(参数)；
css3-2D缩放：
transform:scale(参数1 参数2);（参数0-1以内为缩小，大于1为放大 相同参数写一个就可以）
参数1：在坐标轴X轴缩放的比例
参数2：在坐标轴Y轴缩放的比例
单独设置X/Y：transform:scaleX/Y(参数)；
css3-2D旋转：
transform:rotate(参数);
参数单位deg 默认绕着中心点转）
单独设置X/Y：transform:rotateX/Y(参数)；
css3-2D倾斜：
transform:skew(参数）
单位deg
单独设置X/Y：transform:skewX/Y(参数)；
这些的变形原点都是默认的中心位置，我们也是可以可以改变的！
transform-origin:水平方向 垂直方向 / left right / 10px 10px / 50%;
如果有两个功能函数呢？
我们一般都是先写位置 再写旋转。这样有一个好处就是比较规范 不容易出BUG，兼容性更好。
原文地址：https://www.cnblogs.com/Animy/p/12384959.html