由於hover 的效果，是一瞬間的變化，在一些大面積顏色或是線條的變化時，會顯得過於生硬，此時加上transition 控制變化的時間，就能讓效果滑順起來啦！
要將transition 加在原本的CSS 裡面不是hover 的喔。

transition-delay

a{
	color:#000000;
	transition-delay:1s;
}

a:hover{
	color:#D15352;
}

delay會讓變化延遲，但如果延遲時間過長有可能會讓使用者覺得沒觸發效果。

transition-duration

a{
	color:#000000;
	transition-duration:2s;
}

a:hover{
	color:#D15352;
}

變化進行的時間，字會在2秒間由黑色變為紅色。

transition-timing-function

變化的速度，在形狀與動畫變化時較明顯

• linear：速度一致。
• ease-in：由慢轉快。
• ease-out：由快轉慢
• ease-in-out：先慢，中間正常，後慢。

transition

通常會將transition-property、transition-duration、transition-timing-function與transition-delay寫在同一行，節省程式的運算。

div{
	backgroud-color:#D15352;
  width:50px;
	height:50px
	transition:width 2s ease-in 0.5s;
}

div:hover{
	width:100px;
}

這樣，這個div 就會延遲0.5 秒之後，在2 秒內以ease-in 的方式變寬囉。
也可以將transform寫在一起

div{
	backgroud-color:#D15352;
  width:50px;
	height:50px
	transition:width 2s ,transform 5s;
}

div:hover{
	width:100px;
	transform:rotate(60deg);
}

其實還有一個animation 還沒介紹，但他需要獨立一篇，稍微有點複雜，而我目前的網頁規劃是不會用到，所以後面有時間再說吧！
而且其實從進入CSS篇章開始就單純只是介紹，還沒實際應用的網頁中，所以下一篇是久違的Keep Going篇。

下一章 Keep Going 3

※本文章所使用之圖片皆為本人作品，內容則為本人之經驗分享