Transitions in action

前面我们介绍了 transition 和 animation 这两个属性，这一节我们来看看具体的代码。

Transitions

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

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

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

transition: background 0.5s linear;

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

下面结合具体的例子来看一下：我们希望当鼠标在按钮上悬停时(hover)改变按钮的 background。

button {
  background: white;
  transition: background 0.5s linear;
}

button:hover {
  background: green;
}

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

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

Example: Button transition

你可以查看 CodePen 上的代码，并尝试修改代码来体会不同的效果。

请注意 CodePen 代码里以 transition- 开头的属性。这里用了全写的方式。

transition-property: all;
transition-duration: 0.4s;
transition-timing-function: ease-out;

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

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

transition-timing-function: cubic-bezier(0.59, -0.26, 0.33, 1.42);

Prefixes and browser compatibility

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

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

    -webkit-transition: ...;
    -moz-transition: ...;
    transition: ...;

Homework

大家可以试着修改上面的代码来看看会有什么效果。

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