在:hover、:active的CSS設定中，當然也可以加上animation，當事件觸發時開始播放定義好的@keyframes。

除了animation，還有可以非常簡單讓CSS屬性轉換時，能具有「轉換」的時間過程，讓這樣的變化更加順暢不再生硬。

那就是 transition(轉場) 屬性啦!

像是透過JavaScript或是上一篇提到的:hover等偽元素，當網頁元件發生CSS的項目變化時，如果沒有特別在transition做指定，他的變化就是立刻轉換，而利用transition即可控制CSS屬性轉換的時間，以及速率變化(如同animation所做的時間與速度控制)。

與animation相同，transition也具有數個子屬性：

• transition-property: 定義哪些 CSS 屬性會被 transition 效果影響，多個屬性可用逗號隔開，或使用all則可套用在所有屬性上面。
• transition-duration: 定義 transition 所花費的時間；以時間作為單位，常用秒s或毫秒ms。
• transition-timing-function: 定義變化的速率；預設值為linear(平均速率變化)，另外可以使用step、cubic-bezier和定義好的ease/ease-in/ease-out/ease-in-out。
• transition-delay: 定義多久之後開始執行，可以產生延遲效果；以時間作為單位，常用秒s或毫秒ms。

.my-div {
    color: white;
    background:#333;
    transition-property:all;
    transition-duration:3s;
    transition-timing-function:ease;
}
.my-div:hover {
    color: #333;
    background:white;
}

除了使用子屬性外，也可全部寫在 transition 中：

transition: property duration timing-function delay;

備註：property 和 duration 為必要值。