# Transition Hover Effects [竹白記事本](https://chupainotebook.blogspot.com/2019/02/css-effect.html),學習紀錄,2019/02/19。 >[CSS Text Transition Hover Effects](https://www.youtube.com/watch?v=QRQHivXy75k) ###### tags: `transition` `transform` ## CodePen >[CodePen:Rainy Text Effects](https://codepen.io/chupai/pen/QYJxGb) <iframe height="500" style="width: 100%;" scrolling="no" title="CSS Text Transition Hover Effects" src="//codepen.io/chupai/embed/QYJxGb/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chupai/pen/QYJxGb/'>CSS Text Transition Hover Effects</a> by Chupai@Design (<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> ## transition >[transition|MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition) 定義元件在兩個狀態之間切換的轉場效果。 - `transition-property`,指定進行變換的屬性(預設 `all`)。 - `transition-duration`,指定屬性值變換的時間(預設 `0s`)。 - `transition-timing-function`,指定屬性變換的速度(預設 `ease`)。 - `transition-delay`,指定變換效果的延遲時間(預設 `0s`)。 ## 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%`。