具有過渡屬性的動畫

CSS transition 屬性對於簡單動畫很有用，它允許基於數字的 CSS 屬性在狀態之間進行動畫處理。

例

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

檢視結果

預設情況下，將滑鼠懸停在具有 .Example 類的元素上會立即導致元素的高度跳轉到 120px，其背景顏色變為紅色（#ff0000）。

通過新增 transition 屬性，我們可以導致這些更改隨時間發生：

.Example{
    ...
    transition: all 400ms ease;
}

檢視結果

all 值將轉換應用於所有相容（基於數字）屬性。任何相容的屬性名稱（例如 height 或 top）都可以替換此關鍵字。

400ms 指定轉換所花費的時間。在這種情況下，元素的高度變化將需要 400 毫秒才能完成。

最後，值 ease 是動畫功能，它決定動畫的播放方式。ease 意味著開始慢，加速，然後再慢慢結束。其他值是 linear，ease-out 和 ease-in。

跨瀏覽器相容性

除了 IE 9 之外，所有主流瀏覽器都支援 transition 屬性。對於早期版本的 Firefox 和基於 Webkit 的瀏覽器，請使用如下所示的供應商字首：

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

注意： transition 屬性可以設定任意兩個數值之間的變化動畫，無論單位如何。它也可以在單位之間轉換，例如 100px 到 50vh。但是，它不能在數字和預設值或自動值之間轉換，例如將元素的高度從 100px 轉換為 auto。