当用js更新属性时，浏览器有三种重新渲染的办法

1、重新布局重新绘制重新合成

渲染性能最好，无需重新布局和重新绘制这两个步骤，最常用来做动画

translateX
translateY
translateZ 相对于perspective（可设置）移动（满足近大远小的原则）

left: 50%;
top: 50%;
transform: translate(-50%,-50%);

可用于绝对定位元素的居中

scale会变形变模糊，用的很少

rotate 可用来制作加载中图标

并不是所有的属性都能过渡
1.display:block=>display:none无法过渡
2.visibility:visible=>visibility:hidden则可以顺利过渡

@keyframes