css除了用來設(shè)置樣式外，還可以設(shè)置各種特效，我們常用到的特效有兩種：過渡和動畫，過渡需要響應(yīng)事件更改樣式屬性來觸發(fā)，而動畫，不需要響應(yīng)事件就可以執(zhí)行，下面我們看下，這兩種實現(xiàn)的方式；
css樣式過渡
我們添加一個p塊，當(dāng)鼠標(biāo)移動上去后，更改它的顏色：
css 我是過渡動畫 .trans-cla{ width:100px; height: 100px; background-color: yellow; transition: background-color 2s; } .trans-cla:hover{ background-color: red; }
注：由于這里是一個過渡動畫，大家可以手寫一下試一下，過渡主要是用的
transition: background-color 2s;表示當(dāng)background-color的值改變時，由當(dāng)前的值到最后設(shè)置的值需要持續(xù)2秒；
.trans-cla:hover：表示鼠標(biāo)移動到這個class的p塊時，這個p塊的背景顏色變?yōu)?span id="0hjaecd" class="wpcom_tag_link">紅色。這個過程持續(xù)2秒；
還有兩個屬性：
transition-timing-function:指定過渡的類型；
transition-delay:設(shè)置延遲執(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表示最后變換后的值，這里可以添加百分比用來表示動畫播放過程中到某個進(jìn)度時的樣式，例如可以把from改成0%，to改成100%，中間你可以主動添加其他的百分比并設(shè)置樣式，設(shè)置的樣式在后方使用大括號{}包括起來，寫上此時改變的百分比；
animation:用來設(shè)用動畫，例如animation: lefttoright;10s表動整個動畫播放10s,forwards設(shè)置播放完成后，停止在最后的位置，這個相當(dāng)于你設(shè)置了 animation-fill-mode的屬性，這個里面的很多屬性大家可以查手冊挨個試一下，同樣的animation-delay用來設(shè)置延遲播放的時間；
