# Rotating Border Animation Effects [竹白記事本](https://chupainotebook.blogspot.com/2019/02/css-effect.html)，學習紀錄，2019/03/22。 >[CSS Rotating Border Animation Effects - Border Animation Using CSS3 Keyframes ](https://www.youtube.com/watch?v=t-9UIPEJxxQ) ###### tags: `animation` `transform` `pointer-events` ## CodePen >[Rotating Border Animation Effects](https://codepen.io/chupai/pen/XGxRgL) <iframe height="265" style="width: 100%;" scrolling="no" title="Rotating Border Animation Effects" src="//codepen.io/chupai/embed/XGxRgL/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chupai/pen/XGxRgL/'>Rotating Border Animation Effects</a> by Chupai@Design (<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> ## transform >[transform｜MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform) `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](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation) >[完整解析 CSS 動畫｜Oxxo Studio](https://www.oxxostudio.tw/articles/201803/css-animation.html) 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`](#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 設定關鍵影格 ```css @keyframes 動畫名稱 {屬性設定;} ``` 屬性設定： 1. `from`，動畫第 1 個影格效果設定，等同 0%。 2. `to`，動畫最後 1 個格影格效果設定，等同 100%。 3. `%`，以動畫撥出時間的百分比，進行特定影格設定。 ## pointer-events 為控制滑鼠目標的屬性。 - `auto`，預設值。 - `none`，穿透。 範例：[CodePen](https://codepen.io/CHUPAIWANG/pen/aMoxqp) <iframe height="321" style="width: 100%;" scrolling="no" title="pointer-events" src="//codepen.io/CHUPAIWANG/embed/aMoxqp/?height=321&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/CHUPAIWANG/pen/aMoxqp/'>pointer-events</a> by CHUPAIWANG (<a href='https://codepen.io/CHUPAIWANG'>@CHUPAIWANG</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> 有加上 `pointer-events: none;` 的元素變得可以穿透，並且無法選取，類似幽靈的狀態。