在css中使用偽類雖然實現了樣式的改變，但由於沒有過渡效果會顯得很生硬。以前如果要實現過渡，就需要借助第三方的js框架來實現。現在只需要使用CSS3的過渡（transition）功能，就可以從一組樣式平滑的切換到另一組樣式。
（1）背景色過渡變化
下面鼠標移入后，按鈕背景色會慢慢地變成黃色。鼠標離開，過渡效果又會發生，顏色恢復到初始狀態。
1 <style> 2 .slickButton { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 transition: background 0.5s; 10 -webkit-transition: background 0.5s; 11 } 12 13 .slickButton:hover { 14 color: black; 15 background: yellow; 16 } 17 </style> 18 19 <button class="slickButton">hangge.com</button>
（2）背景色，文字都需要過渡效果
上面樣例看到雖然背景色實現了過渡，文字顏色還是直接改變的。要實現多個樣式的過渡，只需使用逗號作為分隔符，同時制定多個樣式屬性即可。
1 <style> 2 .slickButton { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 transition: background 0.5s, color 0.5s; 10 -webkit-transition: background 0.5s, color 0.5s; 11 } 12 13 .slickButton:hover { 14 color: black; 15 background: yellow; 16 } 17 </style> 18 19 <button class="slickButton">hangge.com</button>
（3）過渡所有樣式
如果想要過渡所有的樣式，並且希望所有過渡都同步完成，可以在指定屬性名的地方填 all。
1 transition: all 0.5s; 2 -webkit-transition: all 0.5s;
（4）淡入淡出
通過修改 opacity 屬性改變透明度，從而實現圖像的淡入淡出。
1 <style> 2 .slickButton2 { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 opacity: 0.5; 10 transition: opacity 0.5s; 11 -webkit-transition: opacity 0.5s; 12 } 13 .slickButton2:hover { 14 opacity: 1; 15 } 16 </style> 17 <button class="slickButton2">hangge.com</button>
熊貓辦公https://www.wode007.com/sites/73654.html
（5）陰影（投影）效果
使用 box-shadow 屬性可以為任何盒子元素添加陰影，從而制作出漂亮的懸停效果。
1 <style> 2 .slickButton3 { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 transition: box-shadow 0.5s; 10 -webkit-transition: box-shadow 0.5s; 11 } 12 .slickButton3:hover { 13 box-shadow:5px 5px 10px gray; 14 } 15 </style> 16 <button class="slickButton3">hangge.com</button>
（6）發光效果
同樣利用 box-shadow 屬性可以實現發光效果，只不過把陰影偏移量設為0。
1 <style> 2 .slickButton4 { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 transition: box-shadow 0.5s; 10 -webkit-transition: box-shadow 0.5s; 11 } 12 13 .slickButton4:hover { 14 box-shadow:0px 0px 20px orange; 15 } 16 </style> 17 <button class="slickButton4">hangge.com</button>
下面樣式不值得使用過渡效果
對於內邊距（padding）、外邊距（margin）和字體大小（font-size）。如果應用由於瀏覽器要重新計算布局大小或文本提示，這樣過渡會消耗更多電量，同時可能導致響應遲鈍和卡殼。
如果想要移動、放大、縮小元素，那么最好使用變形技術。