Transitions in action

在浏览器中，一个元素从一个状态转变成另一个状态，我们称发生了过渡(transition)。浏览器负责来渲染状态变化过程中的每一帧从而创建一个动画效果。

transition 是 CSS 中的属性，就像给元素设置 height、width、border 一样，我们也可以给元素设置 transition。

那 怎么用呢？来看下面代码：

在上面的代码中，我们告诉浏览器，我们希望在 0.5 秒的时间里，按照 linear 的时间函数(timing-function)来改变某个元素的 background 属性。

这里有一点要注意，transition 属性的位置要放到 button 中。这样会告诉浏览器，不光按钮从初始状态变成悬停()的时候要添加过渡效果，当从悬停状态变回初始状态时也要添加过渡效果。

如果我们把 transition: background 0.5s linear; 这句放到下面 button:hover 里，那么当按钮从初始状态变成悬停状态时会有过渡效果，但当从悬停变回初始状态时，就立刻改变了 background，而没有过渡的效果。

上面的代码的意思希望浏览器在0.4s的时间里改变all所有的属性，包括 colours, size, position 等。

可以将 transition-timing-function 设置成下面的贝塞尔曲线函数形式，试试效果会发生什么改变。

上面的代码，为了书写和阅读的方便，都没有添加浏览器前缀，如果要发布正式版，请在属性前加上对应的浏览器前缀。

可以使用 （Codepen 上 css 设置的一个自动添加选项），或者手动添加。

这有一个好玩的例子，你可以试一下：awesome hover style