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

2020-05-04 教育 138阅读

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毫秒。

声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com