多層文字動畫

竹白記事本，學習紀錄，2019/02/12。

Layerize Text Effect using css 3 || Text Animation in css 3

tags: text-rendering user-select animation

CodePen

CodePen：多層文字動畫

文本渲染 text-rendering

文本渲染｜MDN

text-rendering CSS 屬性定義瀏覽器渲染引擎如何渲染字體。瀏覽器會在速度、清晰度、幾何精度之間進行權衡。

• auto，瀏覽器依照某些根據去推測在繪製文本時，何時該優化速度，易讀性或者幾何精度。
• optimizeSpeed，瀏覽器在繪製文本時將著重考慮渲染速度，而不是易讀性和幾何精度. 它會使字間距和連字無效。
• optimizeLegibility，瀏覽器在繪製文本時將著重考慮易讀性，而不是渲染速度和幾何精度.它會使字間距和連字有效。該屬性值在移動設備上會造成比較明顯的性能問題。
• geometricPrecision，瀏覽器在繪製文本時將著重考慮幾何精度，而不是渲染速度和易讀性。字體的某些方面—比如字間距—不再線性縮放，所以該值可以使使用某些字體的文本看起來不錯。

user-select

user-select｜MDN

控制著用戶能否選中文本。除了在文本框裡，它在 chrome 瀏覽器中對已加載的文本沒有影響。

• none，元素及其子元素的文本不可選中。
• text，用戶可以選擇文本。
• all，在一個 HTML 編輯器中，當雙擊子元素或者上下文時，那麼包含該子元素的最頂層元素也會被選中。

瀏覽器支援度：user-select-none｜Can I use

vmin 單位

1. px，絕對單位，代表螢幕中每個「點」pixel。
2. em，相對單位。每個子元素透過「倍數」乘以父元素的 px 值。。
3. rem，相對單位。r 是 root 的縮寫，每個元素透過「倍數」乘以根元素的 px 值。
4. vh and vw，視窗的高度和寬度。
5. vmin and vmax，視窗高度和寬度兩者的最小值或者最大值。

假設瀏覽器的寬度設置為 1200p，高度設置為 800px， 1vmax = 1200/100px = 12px，1vmin = 800/100px = 8px。

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-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 設定關鍵影格

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

屬性設定：

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