css除了用來設置樣式外，還可以設置各種特效，我們常用到的特效有兩種：過渡和動畫，過渡需要響應事件更改樣式屬性來觸發(fā)，而動畫，不需要響應事件就可以執(zhí)行，下面我們看下，這兩種實現(xiàn)的方式；

css樣式過渡

我們添加一個p塊，當鼠標移動上去后，更改它的顏色：

css 我是過渡動畫 .trans-cla{ width:100px; height: 100px; background-color: yellow; transition: background-color 2s; } .trans-cla:hover{ background-color: red; }

注：由于這里是一個過渡動畫，大家可以手寫一下試一下，過渡主要是用的

transition: background-color 2s;表示當background-color的值改變時，由當前的值到最后設置的值需要持續(xù)2秒；

.trans-cla:hover：表示鼠標移動到這個class的p塊時，這個p塊的背景顏色變?yōu)?span id="j5nchtn" class="wpcom_tag_link">紅色。這個過程持續(xù)2秒；

還有兩個屬性：

transition-timing-function:指定過渡的類型；

transition-delay:設置延遲執(zhí)行的時間；

css樣式動畫

有的時候我們打開一個頁面，會看到某些元素會自動執(zhí)行一個動畫，這里我們在打開一個頁面時，頁面的p元素從左邊移動到右邊，字體顏色變?yōu)榧t色：

css 我是自動動畫 .anim-cla{ width:100px; height: 100px; background-color: yellow; animation: lefttoright 10s forwards; position: relative; } @keyframes lefttoright { from{left:0px;} to {left:500px;color:red} }

注：

@keyframes 動畫名稱：這個用來定義一個css動畫，例如：@keyframes lefttoright 定義了一個lefttoright動畫， from 表示開始時候的值 ，to表示最后變換后的值，這里可以添加百分比用來表示動畫播放過程中到某個進度時的樣式，例如可以把from改成0%，to改成100%，中間你可以主動添加其他的百分比并設置樣式，設置的樣式在后方使用大括號{}包括起來，寫上此時改變的百分比；

animation:用來設用動畫，例如animation: lefttoright;10s表動整個動畫播放10s,forwards設置播放完成后，停止在最后的位置，這個相當于你設置了 animation-fill-mode的屬性，這個里面的很多屬性大家可以查手冊挨個試一下，同樣的animation-delay用來設置延遲播放的時間；