Question

CSS3中translate，transform和translation的区别和联系

Answer 1

translate 同其他属性rotate/skew/scale等，构成css中变形的几种方式。translate(x, y) 是将dom元素，在原来的基础上，偏移一定距离。translate需要跟transform结合使用。

transform css中的变形属性

transition 是制作居间动画的一种方式，可以指定“渐变”的css属性，如width，height，top，left，opacity，transform等。还可以指定渐变动画的duration（持续时间），delay（推迟时间），渐变函数（ease、ease-in/out、cubic-bezier等）。

举例说明：

将元素向下偏移20像素，向右偏移20像素 transform: translate(20px, 20px);

当对元素应用变形（transform）属性时，延迟一秒后开始动画，动画速度开始慢，然后加速，最后慢慢结束，动画持续300毫秒 transition: transform 300ms ease 1s; 此时如果你对元素应用transform: translate(20px, 20px);时，一秒钟后，dom元素会逐渐往右下方向移动，直到距离原来下方20像素，右方20像素的位置后停止，动画持续300毫秒。