CSS3 動畫

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-nameanimation-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 指定動畫期間各個點處動畫屬性的值。