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

css樣式過渡

我們添加一個(gè)p塊，當(dāng)鼠標(biāo)移動(dòng)上去后，更改它的顏色：

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

注：由于這里是一個(gè)過渡動(dòng)畫，大家可以手寫一下試一下，過渡主要是用的

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

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

還有兩個(gè)屬性：

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

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

css樣式動(dòng)畫

有的時(shí)候我們打開一個(gè)頁面，會(huì)看到某些元素會(huì)自動(dòng)執(zhí)行一個(gè)動(dòng)畫，這里我們?cè)诖蜷_一個(gè)頁面時(shí)，頁面的p元素從左邊移動(dòng)到右邊，字體顏色變?yōu)榧t色：

css 我是自動(dòng)動(dòng)畫 .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 動(dòng)畫名稱：這個(gè)用來定義一個(gè)css動(dòng)畫，例如：@keyframes lefttoright 定義了一個(gè)lefttoright動(dòng)畫， from 表示開始時(shí)候的值 ，to表示最后變換后的值，這里可以添加百分比用來表示動(dòng)畫播放過程中到某個(gè)進(jìn)度時(shí)的樣式，例如可以把from改成0%，to改成100%，中間你可以主動(dòng)添加其他的百分比并設(shè)置樣式，設(shè)置的樣式在后方使用大括號(hào){}包括起來，寫上此時(shí)改變的百分比；

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