• HTML5/CSS3 互動特效
  • import_contacts 用 CSS 做簡單動畫 - 關鍵影格(@keyframe)
    108
適用範圍

網頁開發人員、網站管理人員

實用性:
重要性:

用 CSS 做簡單動畫 - 關鍵影格(@keyframe)

想要做動畫已經不再只能用 JavaScript 或 jQuery 才做得到,從 CSS3 開始也可以做出簡單甚至有些複雜的動畫了。

animation 基本介紹

animation 是讓 CSS 從一個狀態轉到另一個狀態,藉此來產生動畫效果,而中間轉換的過程,需要借助 關鍵影格(@keyframe) 來達成效果。
關鍵影格(@keyframe) 可以設定各個狀態間轉換的時點,形成一些動畫上快慢的差別。

簡單動畫範例 >> 方塊由左至右水平移動

Html

<!-- 先準備一段簡單的 html -->
<div class="square"></div>

CSS

.square {
    width: 100px;
    height: 100px;
    background: blue;
    display: block;
    position: relative;

    /* animation 參數設定 */
    animation-name: MoveToRight;    /*動畫名稱,需與 keyframe 名稱對應*/
    animation-duration: 4s;    /*動畫持續時間,單位為秒*/
    animation-delay: 2s;    /*動畫延遲開始時間*/
    animation-iteration-count: infinite;    /*動畫次數,infinite 為無限次*/    
}

/* 關鍵影格(@keyframe) */
@keyframes MoveToRight {
    0% { left: 0; }
    25% { left: 20%; }
    50% { left: 40%; }
    75% { left: 60%; }
    100% { left: 80%; }
}

如果想要在每個不同時點設定不同屬性,則用 0% ~ 100% 分別設定屬性,
若只是想要一個簡單、連續的動畫,則可以使用 from to 設定即可,
以上述的例子為例,@keyframe 也可以改成以下的寫法:

@keyframes MoveToRight {
    from { left: 0; }
    to { left: 80%; }
}

範例 1 (0% ~ 100%)

 

範例 2 (from to)

 

info你會發現 2 個寫法雖然都是向右移動,但第一個會"有頓點",第二個"較連續",而要使用哪種寫法,就要看需求而定了。

animation vs transition

transition

不能有時間上個別設定的功能,比較類似上述 from to 的效果,因此動畫效果會比較單一。

animation

因為有 關鍵影格(@keyframe) 可以設定,可以達成更多更複雜的動畫。

至於使用哪種方法來寫 CSS 動畫,就視需求而定。

注意事項

animation 動畫基本上在停止時都會回到最初的設定,因此如何讓 animation 停止時是在最後出現的位置呢?

基本上就是加上下面的屬性:

animation-fill-mode: forwards;
animation-fill-mode 屬性規定動畫在播放前後是否可見。 forwards 參數是說,當動畫結束時,可以停在最後一個影格上, 想要避免動畫結束回到初始設定,可以試試上面的屬性參數喔!