# [CSS] transition 轉場效果

###### tags: `CSS`

想在滑鼠移上去的時候做一點效果，希望能讓整個頁面看起來更精緻，為了使畫面在轉場時變得生動，此時就很適合用到有漸變的動畫的transition。

例如：hover設定浮出來的效果（box shadow）並且變亮。


> transition需寫在外層col上，而非在hover效果層內

#### hover效果列表：

* box-shadow陰影效果，也能在chrome內建工具進行細部調整
* filter效果brightness是可以調整亮度
* transform: scale(1.2) //指定元素由參考點縮放 m 倍
* 更多可參考filter效果列表：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
* filter網路工具：https://www.cssfilters.co/