前端提高篇（五十一）CSS3进阶14：transition过渡动画，web前端开发h5

如果我们想要让这个平移的效果缓慢一点，就可以用transition过渡

需要过渡效果的属性是transform，设定过渡完成的时间是1000ms

在css添加transition：

#demo {

height: 100px;

width: 100px;

line-height: 100px;

background: pink;

transition: transform 1000ms;

}

可以看到，平移的过渡缓慢了很多

我们希望，不仅向右平移600px，高度也要发生变化，也是1s实现，transition，用逗号隔开，

css中：

transition: transform 1000ms, height 1s;

js中：

var demo = document.getElementById(‘demo’);

demo.onclick = function() {

this.style.transform = ‘translateX(600px)’;

this.style.height = ‘200px’;

}

效果：