Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
透過 animation-direction
來設定動畫效果的執行方向,這裡指的方向,意思是從 0% 到 100%;那反向就是從 100% 到 0%。
normal
:預設值,按照正常方向(0% ~ 100%)。
reverse
:將 normal 的執行方向,反方向來執行。(100% ~ 0%)
alternate
:方向反覆交替,當 animation-iteration-count
大於 1 的時候,才會有效。第一次是正向執行。
alternate-reverse
:方向反覆交替,當 animation-iteration-count
大於 1 的時候,才會有效。第一次是反向執行。
例:
透過使用 animation-timing-function
,可以控制動畫效果的速度曲線,背後的原理是 cubic-bezier。
animation-timing-function 有七種模式:
ease:這是預設。相當於 cubic-bezier(.25, .1, .25, 1)
linear:相當於 cubic-bezier(0, 0, 1, 1)
ease-in:相當於 cubic-bezier(.42, 0, 1, 1)
ease-out:相當於 cubic-bezier(0, 0, .58, 1)
ease-in-out:相當於 cubic-bezier(.42, 0, .58, 1)
cubic-bezier(n, n, n, n)
steps(int, start | end)
ease
:低速 → 加快 → 減速至結束。這是預設值。
linear
:速度保持一致。
示意圖:
例:(一個元素從左邊跑到右邊)
ease-in
:以低速開始。
ease-out
:以低速結束。
ease-in-out
:以低速開始,也以低速結束。
示意圖:
例:
像上述的 ease(預設)、linear、ease-in、ease-out、ease-in-out 等,都是別名,其實背後都是透過 cubic-bezier()
函式來達成。
這裡有兩個不錯的網站:
自訂曲線:自行建立曲線,來創造動畫不同的執行速度。
Easing Functions:列出很多已經建好的函式形式,可以直接套用。
例如 linear
,我們其實也可以用以下來代替(相當於 cubic-bezier(0, 0, 1, 1)
):
所以透過 cubic-bezier()
函式 ,可以自訂任何想要的動畫執行速度快慢。
這會以跳躍式的方式來執行,第一個參數(steps)是一個正整數,表示有幾個間隔;而第二個參數(position)可設定 start 或 end(若沒有提供的話,預設是 end
),來看看範例來瞭解其中差異:
想成如果是 start,就是一開始就要跳。
示意圖:
例:
建立 practice/animation_loading_icon.html 檔案,提供 HTML 如下:
請完成 Loading Icon。畫面結果請直接參考下方的 codepen。
參考作法:
建立 practice/animation_sprite.html
檔案,試試看以下效果:
一張圖,寬 2000px,高 250px,如下:
以下做個劃分,也就是上面這張圖,其實是 8 張圖片,合成一張,如下示意:
使用 animation-timing-function
中的 steps
完成 Sprite 動畫效果。
提供 HTML 如下:
提示的示意圖:
參考作法:
圖片路徑:
@keyframes:用來建立一個動畫效果的名稱,然後創造動畫影格。
animation-name:某個動畫效果的名稱。
animation-duration:動畫效果要執行的「期間」。
先瞭解這三樣東西,就可以至少將動畫效果套用至指定元素。
1、動畫名稱、初始狀態、最終狀態,程式碼的撰寫方式,如下圖:
2、設定一個名稱叫做 rotation 的動畫,初始狀態(0%)時,設定 transform 為 rotate(0deg);最終狀態(100%)時,設定 transform 為 rotate(360deg),如下程式碼:
3、讓某個元素套用由 @keyframes
做好的 rotation
動畫,並且設定執行期間為 5 秒:
例:
這樣就完成了一個基本的動畫了。另外 0%
及 100%
有各自的保留字,故 0% 可改寫成用 from
來替代;100% 可改寫成用 to
來替代。