Try   HackMD

Glowing Loader Ring Animation

竹白記事本,學習紀錄,2019/03/08。

Glowing Loader Ring Animation - Pure CSS Animation Effects - How To Create CSS3 Spinning Preloader

tags: animation transform clip-path

CodePen

Glowing Loader Ring Animation

另一種半圓作法(clip-path)

Glowing Loader Ring Animation 2

clip-path

運用 clip-path 的純 CSS 形狀變換|Oxxo Studio

Clip-Path

transform

transform|MDN

transform CSS 屬性可以讓你修改 CSS 可視化格式糢型(visual formatting model)的空間維度。使用此屬性,元素可以被平移、旋轉、縮放和傾斜。

  • translate(x,y),元素水平、垂直移動。
  • translateX(x),元素水平移動。
  • translateY(y),元素垂直移動。
  • scale(x,y),元素縮放。
  • scaleX(x),元素水平方向縮放。
  • scaleY(y),元素垂直方向縮放。
  • rotate(angle),元素旋轉的角度。
  • skew(x-angle,y-angle),元素傾斜設定。
  • skewX(angle),元素水平傾斜設定。
  • skewY(angle),元素垂直傾斜設定。
  • matrix(n,n,n,n,n,n),以含有 6 個參數值的變化定元素的變形效果。
  • none,不進行任何變換。

transform-origin

transform-origin 屬性為複合屬性值,其屬性包含水平(X 軸),與垂直(Y軸),方向的變量參數,變量參數間以空白隔開。如果只給一個數值,則變更水平(X 軸),垂直(Y軸)不變。

可用屬性值:

  • 長度,數值 + 單位
  • %(百分比),以元素預設中間的點的基準為百分比值。
  • left,靠左,水平方向位置的選項,等同 0%
  • right,靠右,水平方向位置的選項,等同 100%
  • top,靠上,垂直方向位置的選項,等同 0%
  • bottom,靠下,垂直方向位置的選項,等同 100%
  • center,置中, 水平、垂直方向位置的選項,等同 50%

animation 屬性

animation|MDN
完整解析 CSS 動畫|Oxxo Studio

CSS animation 屬性是如下屬性的一個簡寫屬性形式:

  • animation-name,指定動畫名稱。
  • animation-duration,指定動畫撥出時間。
  • animation-timing-function,指定動畫撥放的速度。
  • animation-delay,設定動畫延遲播放時間。
  • animation-iteration-count,設定動畫播放次數。
  • animation-direction,設定動畫播放方向。
  • animation-fill-mode,設定動畫播放前後模式。
  • animation-play-state,動畫播放或暫停狀態。

animation-name

指定應用的一系列動畫,每個名稱代表一個由 @keyframes 定義的動畫序列。

animation-duration

動畫撥出的持續時間,數值加上單位 s 秒或 ms 毫秒,如果時間為負數等同 0 秒,不會進行動畫。

animation-timing-function

  • ease,平滑播放(逐漸變慢)。
  • ease-in,慢到快(加速)。
  • ease-out,快到慢(減速)。
  • ease-in-out,慢到快再到慢(先加速後再減速)。
  • linear,線性播放(等速)。
  • step-startstep-end,按照關鍵影格的順序一格格進行,不會有中間的演算動畫,兩者差異在於,前者看不到第一格,後者看不到最後一格。
  • cubic-bezier(),自定義速度。

animation-delay

設定動畫延遲播放時間,數值加上單位 s 秒或 ms 毫秒,如果時間為負數則是快轉。

animation-iteration-count

動畫播放的次數,預設值為 1 次。

  • 次數,指定播放次數。
  • infinite,無限循環。

animation-direction

  • normal,正常播放,從 0% 到 100%(預設值)。
  • reverse,反轉播放,從 100% 到 0%。
  • alternate,正反轉輪流播放,奇數次為 0% 到 100%,偶數次為 100% 到 0%,若動畫播放次數只有一次就只會正常播放。
  • alternate-reversealternate 的相反,奇數次為 100% 到 0%,偶數次為 0% 到 100%,若動畫播放次數只有一次就只會反轉播放。

animation-fill-mode

動畫播放前後模式。

  • none,預設值,不論動畫播放次數,結束後一律返回原始狀態。
  • forwards,動畫結束後,保持在最後一個影格狀態。
  • backwards,動畫結束後,保持在第一個影格狀態(但實際測試和 none 效果一樣)。
  • both,依據動畫的次數或播放方向,保持在第一個影格或最後一個影格狀態,相當實用。

animation-play-state

動畫播放或暫停狀態。

  • running:,預設值,表示動畫運行。
  • paused,表示動畫暫停。

@keyframes 設定關鍵影格

@keyframes 動畫名稱 {屬性設定;}

屬性設定:

  1. from,動畫第 1 個影格效果設定,等同 0%。
  2. to,動畫最後 1 個格影格效果設定,等同 100%。
  3. %,以動畫撥出時間的百分比,進行特定影格設定。