Transitions properties

前面我们简单介绍 transition，下面我们来具体的看下它有哪些属性和对应的含义。

Shorthand vs Longhand

在写 CSS 样式的时候我们经常将多个属性写成简写( Shorthand )的形式。比如设置元素的 padding 值我们就可以这么写：

    padding: 10px 20px 15px 25px;

上面和下面的代码是等价的：

    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 25px;

同理，transition 也有其简写形式：

    transition: all 0.5s 1s linear;

transition 的简写形式对应各属性含义如下：

    transition: [property] [duration] [delay] [timing-function];

上面的例子中，各属性也可以单独写：：

    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 1s;
    transition-timing-function: linear;

让我们来看下各个属性具体的含义。

transition-property

通常是简写形式的第一个属性，规定应用过渡的 CSS 属性的名称。比如要修改 background ，就可以在这里写 background 。也可以使用 all ，所有适用的CSS过渡的属性上创建过渡效果（不是所有的属性都可以创建过渡效果的）。

transition-duration

transition-duration 表示过渡效果的持续时间。transition-duration 设置成3s的持续时间是指设置3倍的1000ms。

transition-delay

transition-delay 表示过渡效果的延迟时间（效果开始前的等待时间），单位可以是秒或者毫秒。3s 表示3秒，100ms表示100毫秒，也可以写成0.1s。

transition-timing-function

transition 和 animation 都会使用时间函数（timing function），时间函数有很多可选值，这里就不一一列举了，后续会详细说明。

Things transitions don't work on

过渡效果（transition）可以应用在很多的属性上，比如 position，size,colour,border,background-position，但有些属性是不能应用过渡的，比如 font-family。

用CSS创建的背景图像（例如渐变效果），不能对其属性使用动画。这意味着浏览器用每帧动画重新创建背景图像，因此不支持。

不过你可以在 opacity 和 background-position上使用过渡。通过移动背景图(background images)或者隐藏背景图可以创建很丰富的效果。

举个栗子说明下：Baymax example 。

再来一个：button sheen effect

Homework

我创建了一个简单的 transtion 效果（Codepen），你可以尝试修改不同的属性来创造不同的效果。