transition初體驗

transition的作用可以讓web前端開發(fā)人員不需要javascript就可以實現(xiàn)簡單的動畫交互效果。過渡屬性看似簡單，但實際上它有很多需要注意的細節(jié)和容易混淆的地方。

以上是transition的四個屬性。

使用語法

transition: property duration timing-function delay;

舉一個例子：使用所有的過渡屬性

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;/* Firefox 4 */-moz-transition-property:width;
    -moz-transition-duration:1s;
    -moz-transition-timing-function:linear;
    -moz-transition-delay:2s;/* Safari 和 Chrome */-webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;/* Opera */-o-transition-property:width;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:2s;
}

該例子可寫成簡寫的 transition 屬性：

div
{
    transition: width 1s linear 2s;
    -moz-transition:width 1s linear 2s; /* Firefox 4 */
    -webkit-transition:width 1s linear 2s; /* Safari and Chrome */
    -o-transition:width 1s linear 2s; /* Opera */
}

[注意]transition的這四個子屬性之間不能用逗號隔開，只能用空格隔開。因為逗號隔開的代表不同的屬性(transition屬性支持多值，多值部分稍后介紹)；而空格隔開的代表不同屬性的四個關(guān)于過渡的子屬性。