竹白記事本,學習紀錄,2019/03/08。
Glowing Loader Ring Animation - Pure CSS Animation Effects - How To Create CSS3 Spinning Preloader
animation
transform
clip-path
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
屬性為複合屬性值,其屬性包含水平(X 軸),與垂直(Y軸),方向的變量參數,變量參數間以空白隔開。如果只給一個數值,則變更水平(X 軸),垂直(Y軸)不變。
可用屬性值:
%
(百分比),以元素預設中間的點的基準為百分比值。left
,靠左,水平方向位置的選項,等同 0%
。right
,靠右,水平方向位置的選項,等同 100%
。top
,靠上,垂直方向位置的選項,等同 0%
。bottom
,靠下,垂直方向位置的選項,等同 100%
。center
,置中, 水平、垂直方向位置的選項,等同 50%
。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-start
、step-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-reverse
,alternate
的相反,奇數次為 100% 到 0%,偶數次為 0% 到 100%,若動畫播放次數只有一次就只會反轉播放。animation-fill-mode
動畫播放前後模式。
none
,預設值,不論動畫播放次數,結束後一律返回原始狀態。forwards
,動畫結束後,保持在最後一個影格狀態。backwards
,動畫結束後,保持在第一個影格狀態(但實際測試和 none 效果一樣)。both
,依據動畫的次數或播放方向,保持在第一個影格或最後一個影格狀態,相當實用。animation-play-state
動畫播放或暫停狀態。
running
:,預設值,表示動畫運行。paused
,表示動畫暫停。@keyframes 動畫名稱 {屬性設定;}
屬性設定:
from
,動畫第 1 個影格效果設定,等同 0%。to
,動畫最後 1 個格影格效果設定,等同 100%。%
,以動畫撥出時間的百分比,進行特定影格設定。