CSS3 動畫

Created: October-16, 2018

CSS3 動畫功能允許你建立關鍵幀動畫。

建立 CSS3 動畫

在上一章中，你已經瞭解瞭如何通過 CSS3 過渡功能執行簡單動畫，例如將屬性從一個值設定為另一個值。但是，CSS3 過渡幾乎無法控制動畫隨時間推移的進展。

CSS3 動畫更進一步使用基於關鍵幀的動畫，允許你將 CSS 屬性隨時間的變化指定為一組關鍵幀，如 flash 動畫。建立 CSS 動畫是一個兩步過程，如下例所示：

構建 CSS 動畫的第一步是定義單個關鍵幀並使用關鍵幀宣告命名動畫。
第二步是使用 animation-name 屬性按名稱引用關鍵幀，以及新增 animation-duration 和其他可選動畫屬性來控制動畫的行為。

但是，在引用或應用關鍵幀規則之前，無需定義關鍵幀規則。以下示例將向你展示如何使用 CSS3 動畫功能將 <div> 框從一個位置水平設定為另一個位置。

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

你必須指定至少兩個屬性 animation-name 和 animation-duration （大於 0）才能進行動畫。但是，所有其他動畫屬性都是可選的，因為它們的預設值不會阻止動畫發生。

注意： 並非所有 CSS 屬性都是可動畫的。通常，任何接受數字，長度，百分比或顏色值的 CSS 屬性都是可動畫的。

定義關鍵幀

關鍵幀用於指定動畫各個階段的動畫屬性的值。關鍵幀使用專門的規定，在規則 CSS - @keyframes 。關鍵幀樣式規則的關鍵幀選擇器以百分比（%）或關鍵字 from （相同為 0％）或 to （相同為 100％）開頭。選擇器用於指定在動畫持續時間內構造關鍵幀的位置。

百分比表示動畫持續時間的百分比，0％表示動畫的起點，100％表示終點，50％表示中點，依此類推。這意味著，2s 動畫中的 50％關鍵幀將成為動畫的 1s。

.box {
    width: 50px;
    height: 50px;
    margin: 100px;
    background: red;
    position: relative;
    left: 0;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: shakeit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: shakeit;
    animation-duration: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}
 
/* Standard syntax */
@keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}

動畫速記屬性

建立動畫時需要考慮許多屬性。但是，也可以在一個屬性中指定所有動畫屬性以縮短程式碼。

該 animation 屬性是一個速記屬性，用於按列出的順序一次設定所有個動畫屬性。例如：

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation: repeatit 2s linear 0s infinite alternate;
    /* Standard syntax */
    animation: repeatit 2s linear 0s infinite alternate;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}

注意： 如果缺少或未指定任何值，則將使用該屬性的預設值。這意味著，如果 animation-duration 缺少屬性值，則不會發生轉換，因為其預設值為 0。

CSS3 動畫屬性。

下表提供了所有與動畫相關的屬性的簡要概述。

屬性	描述
`animation`	用於在單個宣告中設定所有動畫屬性的簡寫屬性。
`animation-name`	指定 `@keyframes` 應應用於所選元素的已定義動畫的名稱。
`animation-duration`	指定動畫完成動畫的一個迴圈所花費的秒數或毫秒數。
`animation-timing-function`	指定動畫在每個迴圈的持續時間內的進度，即緩動函式。
`animation-delay`	指定動畫何時開始。
`animation-iteration-count`	指定停止前應播放動畫迴圈的次數。
`animation-direction`	指定動畫是否應在交替迴圈中反向播放。
`animation-fill-mode`	指定 CSS 動畫在執行之前和之後應如何將樣式應用於其目標。
`animation-play-state`	指定動畫是執行還是暫停。
`@keyframes`	指定動畫期間各個點處動畫屬性的值。