在元素的两种状态之间用 CSS 的 transition 可以添加点过渡动画效果。

之前我们用 :hover 还有 :active 这两个伪类给这个元素的悬停还有活动状态设计了样式，实际上就是改变了元素的一些 CSS 样式属性。正常状态这个元素没有阴影，鼠标放在元素上的时候它就会应用一个阴影效果，点击元素的时候会改变元素的背景颜色还有阴影这两个样式属性。

下面我们用 transition 给元素加点过渡动画。在文档的样式表里，可以在 #app 这个元素里面，用一下 transition 相关的样式属性。

先用 transition-property 设置一下允许过渡的 CSS 样式属性，如果允许过渡所有可以过渡的样式属性，可以把它的值设置成 all ，或者也可以单独设计允许过渡的样式属性，比如我们需要的是 box-shadow 还有background-color，属性之间用逗号分隔开。

然后再用 transition-duration 这个样式属性设计一下过渡动画持续的时长，比如我们让这个过渡动画持续半秒钟，可以把它的值设置成 0.5s，s 表示秒，或者也可以使用毫秒作为单位，半秒如果用毫秒表示的话，应该是 500ms，这个 ms 表示毫秒，1000 毫秒等于 1 秒钟。

在浏览器测试一下鼠标放在这个元素的上面，显示阴影的时候，现在会使用一种过渡的动画效果。再点击元素，变换背景颜色还有阴影的时候都会使用一种过渡动画。

用 transition-timing-function 这个样式属性可以指定过渡动画的效果，它实际上决定的是如何计算两个状态的样式属性中间的值，我们可以把它想成是动画的个性。CSS 预置了几种效果，先试一下 linear ，再测试一下过渡效果，这种动画没什么起伏，有点像是在做匀速直线运动。

transition-timing-function 属性默认值是 ease。或者我们也可以使用 cubic-bezier() 这个函数来设计需要的效果。在 https://easings.net/ 这个网站，你可以找到一些参考（easeInOutQuint）。打开其中一个 Easing function，然后可以复制一下这个 cubic-bezier 函数。

让它作为 transition-timing-function 样式属性的值。在浏览器上再观察一下现在的过渡动画效果。如果你想在这个过渡效果里加点延迟，可以使用 transition-deplay 这个样式属性来设置延迟的时长。

transition

过渡还有一种简单的写法，可以使用 transition 这个样式属性，它的值有几种写法，可以是一条过渡也可以是多条过渡。每个过渡之间可以用逗号分隔开。每条过渡的第一个值是过渡属性，第二个值是过渡时长，第三个值是 timing-function，第四个值是过渡延迟。第三第四个值可以省略。

比如 transition: box-shadow 0.5s, background-color 0.5s ，这里设置了两条过渡，过渡的属性是 box-shadow 还有 background-color，时长都是 0.5s， timing-function 使用默认的，没有延迟。

如果想要过渡所有可以过渡的属性，只需要提供一条过渡，在这条过渡里面，可以把过渡属性设置成 all，后面再加上一个过渡时长。在写过渡样式的时候，我们最好明确地说明要过渡的样式属性，这样可以提升页面的性能。