#javascript#属性 transition

#每天记录一点点#

 

 $('button').click(function() {
         //点击button改变css属性
    element.css({
    'transition-timing-function': 'ease',//过度效果
    'transition-duration': '5000ms',
    'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //设置页面X轴移动
});
 });

transition-timing-function：过渡效果，速度，常用的有linear，ease

transition-duration：让过渡效果持续时间；

transform：旋转、缩放、移动或倾斜

（1）translate3d：在这段代码中，x坐标改变了，yz坐标没变。但还是用3d用来控制元素的位置在页面上的三轴的位置，因为translate3d这里指明了3d就是启用了3d加速，也就是启动GPU来处理，性能更强。

改成translate也是可以的，表示2d转换；

（2）w3c中展示了还有其他一些属性：