CSS--过渡-Transition

当 CSS 的属性值更改后，浏览器通常会立即更新相应的样式，例如当鼠标悬停在元素上时，通过 :hover 选择器定义的样式会立即应用在元素上。

而在 CSS3 中加入了一项过渡功能，通过该功能您可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画。

但是要实现这一点，必须规定两项内容：

1. 指定要添加效果的CSS属性
2. 指定效果的持续时间。

 CSS transition：

可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing function，比如匀速地或先快后慢)。

#### -过渡三要素

​	1.1必须要有属性发生变化
​	1.2必须告诉系统哪个属性需要执行过渡效果
​	1.3必须告诉系统过渡效果持续时长

-transition-property：

规定应用过渡的 CSS 属性的名称。

none 没有属性会获得过渡效果。 ​ all 所有属性都将获得过渡效果。 ​ property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

-transition-duration：

定义过渡效果花费的时间。默认是 0。

time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。

-transition-timing-function