CSS_过渡(transition)，动画(animation)

过渡(transition)

如果只写transform，变换会一下子完成。有的时候我们需要让这个变化过程在一段时间内平滑的完成，这时会用到过渡。过渡用于补中间帧（类似于播放一段动画）。

过渡的写法

给要转换的元素加上transition属性，即可实现过渡。

transition属性的值有以下几种：（要变换的）属性名 、 过渡时长、 过渡方式、 延迟。依次解释：

• （要变换的）属性名：需要让哪些属性进行过渡。可以是具体的属性名或者是all。

• 过渡时长：多久完成过渡。单位可以是s或者ms。

• 过渡方式：动画的播放方式。常用的有：

ease：一开始快一些，后来变慢些。具体还可以有ease-in，ease-out等。

linear：线性变化。

可用的过渡方式参考：https://developer.mozilla.org/zh-CN/docs/conflicting/Web/CSS/easing-function

• 延迟：过多久开始过渡。

有一些属性是无法过渡的。例如：display: block 和 display: none 之间不能过渡。

visiblity: hidden和visiblity: visible / opacity:1和opacity:0之间可以过渡。它们的共同点是：

• 元素仍然会占据原来的位置。要想取消元素占用的位置还得用eventListener的transitionend 加上 div.remove()。
• DOM节点仍然存在。

区别有：

• visiblity: hidden的元素的绑定事件不会触发。

• visiblity: hidden的元素的子元素仍然会显示。

除了transform属性