一、transition（過(guò)渡、轉(zhuǎn)變的意思）

成都創(chuàng)新互聯(lián)公司為您提適合企業(yè)的網(wǎng)站設(shè)計(jì)?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強(qiáng)的網(wǎng)絡(luò)競(jìng)爭(zhēng)力！結(jié)合企業(yè)自身，進(jìn)行網(wǎng)站設(shè)計(jì)及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到網(wǎng)站建設(shè)、成都做網(wǎng)站， 我們的網(wǎng)頁(yè)設(shè)計(jì)師為您提供的解決方案。

transition 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置四個(gè)過(guò)渡屬性：

1. transition-property：設(shè)置過(guò)渡效果的屬性名稱（默認(rèn)值是all）；

2. transition-duration：設(shè)置過(guò)渡完成所需要的時(shí)間（默認(rèn)值是0）；

3. transition-timing-function：設(shè)置過(guò)渡速度效果曲線（默認(rèn)值是ease）；

4. transition-delay：設(shè)置過(guò)渡的開始時(shí)間（默認(rèn)值是0）；

語(yǔ)法：transition: property duration timing-function delay;

注意：這里transition-duration是需要填的，不填默認(rèn)為是0，沒(méi)有過(guò)渡效果。

二、animation（動(dòng)畫、活力的意思）

animation 屬性也是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置六個(gè)動(dòng)畫屬性：

1. animation-name：設(shè)置綁定到選擇器的@keyframem名稱（默認(rèn)值是none）；

2. animation-duration：設(shè)置完成動(dòng)畫所花費(fèi)的時(shí)間（默認(rèn)值是0）；

3. animation-timing-function：設(shè)置動(dòng)畫的速度曲線（默認(rèn)值是ease）；

4. animation-delay：設(shè)置動(dòng)畫延遲幾秒開始（默認(rèn)值是0）；

5. animation-iteration-count：設(shè)置動(dòng)畫播放的次數(shù)（默認(rèn)值是1）；

6. animation-direction：設(shè)置時(shí)候輪流反向播放動(dòng)畫（默認(rèn)值是normal）；

語(yǔ)法：animation: name duration timing-function delay iteration-count direction;

注意：這里animation-duration是需要填的，不填默認(rèn)是0，就不會(huì)播放動(dòng)畫了。

三、區(qū)別

1. transition是一個(gè)過(guò)渡的效果，沒(méi)有中間狀態(tài)，需要設(shè)置觸發(fā)事件（如hover等）才能執(zhí)行；

2. animation是一個(gè)動(dòng)畫的效果，有多個(gè)中間幀，可以在任意一個(gè)中間幀設(shè)置狀態(tài)，不需要設(shè)置觸發(fā)事件就能執(zhí)行。