CSS3 新定義了互動式動畫，這是一個很棒的改變，

提供了直接在 CSS 檔裡設定完，不需依靠 javascript 就能做出簡單的動畫，

比方說能以純 CSS code 做出下拉式選單這個功能，

而且使用方式很簡單，相較 javascript 更易使用。

但 javascript 並非就被冷略了，

這個方式我想是為了切割功能上的維護，

頁面上的視覺簡易動畫交給 CSS 能夠更快速的在同一個檔案改變動畫狀態與效果，

javascript 可以專心在非動畫的互動，

讓我們直接進入主題吧 !

div {

width: 100px;

transition: width 2s;

}

div:hover {

width: 300px;

}

這是一個簡單的寬度改變的動畫，:hover 是控制滑動後改變的數值，

要注意的是 transition 動畫必須寫在尚未執行動作的元素裡，

如果寫在 :hover 裡就會沒有效果，有點像是指定命令原本的區塊執行動作，

第一個值為動畫的內容，第二個值為動畫播放時間，

趕快試試看吧!