CSS3中提供了許多有用的動(dòng)畫屬性，如transition、animation等。這些屬性可以幫助我們實(shí)現(xiàn)各種各樣的動(dòng)畫效果，使頁(yè)面更加生動(dòng)有趣。下面就來(lái)介紹一下如何設(shè)置這些動(dòng)畫屬性。

/* 設(shè)置transition屬性 */
.box{
transition: all 1s;
}
/* 設(shè)置animation屬性 */
.box{
animation: myAnimation 2s infinite;
}

首先是transition屬性，它可以讓元素在不同狀態(tài)間平滑的過(guò)渡。在上面的代碼中，我們?yōu)?box元素設(shè)置了transition屬性，它包含了兩個(gè)參數(shù)，第一個(gè)參數(shù)是屬性名all，表示將所有屬性都進(jìn)行過(guò)渡。第二個(gè)參數(shù)是時(shí)間值1s，表示完成過(guò)渡所需的時(shí)間為1秒。這樣，當(dāng).box元素的屬性值改變時(shí)，它就會(huì)以1秒的時(shí)間進(jìn)行平滑的過(guò)渡。 接著是animation屬性，它可以讓元素進(jìn)行更加復(fù)雜的動(dòng)畫效果。在上面的代碼中，我們?yōu)?box元素設(shè)置了animation屬性，它包含了三個(gè)參數(shù)，第一個(gè)參數(shù)是動(dòng)畫名稱myAnimation，我們需要事先定義這個(gè)動(dòng)畫名稱的具體效果。第二個(gè)參數(shù)是時(shí)間值2s，表示完成一次動(dòng)畫所需的時(shí)間為2秒。第三個(gè)參數(shù)是infinite，表示動(dòng)畫將無(wú)限次循環(huán)執(zhí)行。 除了以上兩個(gè)屬性，CSS3還提供了很多其他有用的動(dòng)畫屬性，如@keyframes、perspective等。但是需要注意的是，動(dòng)畫效果要合理使用，不要過(guò)多的給頁(yè)面增加負(fù)擔(dān)，造成性能問(wèn)題。