CSS3 過渡

過渡：執行必定操做後某屬性從指定狀態過渡到另外一狀態。1.指定要添加效果的CSS屬性。 2.指定效果的持續時間。

div{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

div:hover{
    width:300px;
}

也能夠同時改變多個屬性

div{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

transition的四個屬性以下：

div{
    transition: 屬性名 過渡時間 過渡效果的時間曲線 開始的延遲時間
    -webkit-transition:屬性名 過渡時間 過渡效果的時間曲線 開始的延遲時間
}
屬性名:width height background-color;
過渡時間:2s;
過渡效果的時間曲線: linear ease ease-in ease-out ease-in-out;
開始的延遲時間:2s;