「CSS3 」動畫詳解

JasonKidd發表於2015-08-28
CSSS3動畫

CSS3 提供給了我們非常多的轉換函式：

  • 2D: translate, rotate, scale, skew.
  • 3D: translate3d, rotate3d, scale3d, skew3d.

只需要將這些函式作為transform屬性的值，就可以設定相應的效果。

CSS3 動畫則是將這些效果以及其他CSS屬性按照你設定的方式來進行互相轉變。

1. 動畫相關屬性

屬性 | 描述
————————— | ——————————————————————————
@keyframes | 定義動畫各個階段的狀態的程式碼段
animation | 所有動畫屬性的簡寫屬性，除了 animation-play-state 和 animation-fill-mode 屬性。
animation-name | 規定 @keyframes 動畫的名稱。
animation-duration | 規定動畫完成一個週期所花費的秒或毫秒。預設是 0。
animation-timing-function | 規定動畫的速度曲線。預設是 ease。
animation-delay | 規定動畫何時開始。預設是 0。
animation-iteration-count | 規定動畫被播放的次數。預設是 1。
animation-direction | 規定動畫是否在下一週期逆向地播放。預設是 normal。
animation-play-state | 規定動畫是否正在執行或暫停。預設是 running。
animation-fill-mode | 規定元素在動畫開始前和完成後的狀態，預設是 none。

@keyframes

定義動畫各個階段的狀態的程式碼段。比如開始態，結束態，中間態（使用百分比表示）。

@keyframes exampleName {
    from {
        transform: rotateY(0deg);
        background: #000000;
    }
    50% {
        transform: rotateY(180deg);
        background: #00fa7e;
    }
    to {
        transform: rotateY(0deg);
        background: #008dff;
    }
}

animation-name

使用 @keyframes 定義的狀態集合名稱，如上面的 exampleName。

animation-duration

動畫的週期時間。單位可以是秒(s)，也可以是毫秒(ms)。

animation-timing-function

動畫變化速度函式，有如下幾種選項：

  • linear: 速度不變。cubic-bezier(0,0,1,1)
  • ease-in: 低速開始 ~ 正常速度。cubic-bezier(0.42,0,1,1)
  • ease-out: 正常速度 ~ 低速結束。cubic-bezier(0,0,0.58,1)
  • ease-in-out: 低速開始 ~ 正常速度 ~ 低速結束。cubic-bezier(0.42,0,0.58,1)
  • ease: 與 ease-in-out 基本相同，但是開始稍微比結束快一點兒。cubic-bezier(0.25,0.1,0.25,1)
  • cubic-bezier(x1, y1, x2, y2): 使用三次貝塞爾函式作為速度函式。

cubic-bezier曲線測試除錯網站：cubic-bezier

animation-delay

動畫開始之前等待的時間。單位可以是秒(s)，也可以是毫秒(ms)。

animation-iteration-count

動畫的迴圈次數。可以是具體的次數，也可以是 infinite，表示無限迴圈播放。

animation-direction

動畫迴圈的方向：

  • normal: 正向播放。
  • reverse: 反向播放。
  • alternate: 正向播放與反向播放交替進行。

animation

以上6個屬性可以使用這一個屬性來表示，格式為：

animate: name duration timing-function delay iteration-count direction;

animation-play-state

控制動畫的狀態，有播放(running)和暫停(paused)兩種狀態。

animation-fill-mode

規定元素在動畫開始前和完成後的狀態。

  • none: 元素在動畫前後的狀態和動畫沒有聯絡。
  • forwards: 動畫完成後，元素保持動畫最後的狀態。
  • backwards: 動畫開始前，元素保持動畫開始的狀態。
  • both: forwards 和 backwards 的結合。

2. transition

CSS3 除了 animation 相關的屬性以外，還提供給我們一個 transition 屬性，格式為：

transition: propertyName duration [timing-function] [delay], ...;

大家可能已經也看出來了，其實 transition 就是 @keyframes 只有 from 和 to 兩個狀態，並且播放次數為1，且不能暫停的 animation。

舉個例子，當滑鼠放到一個 div 上的時候，它旋轉90度，並且背景從黑色變為灰色，字型從白色變為黑色。

<div id="division2"></div>
#division2 {
    width: 300px;
    height: 100px;
    margin-top: 50px;
    font-size: 2em;
    text-align: center;
    line-height: 100px;
    color: #FFF;
    background: #000;
    transition: transform 2s linear 0s, background 2s linear 0s, color 2s linear 0s;
}

#division2:hover {
    background: #cccdd1;
    color: #000;
    transform: rotate(90deg);
}

3. Demo

[重要提示]請不要忘記推薦和收藏 (╯‵□′)╯︵ ┴─┴

git clone https://github.com/JasonKid/fezone.git

搜尋 動畫詳解

相關文章