早上好，這里是文匯信息服務(wù)官網(wǎng)。

CSS和CSS3都是樣式，CSS3是在CSS上新增了樣式屬性。

比如說(shuō)animation，transition，transform，border-radius......

有了css3可以寫(xiě)好多之前需要用jq才能寫(xiě)出來(lái)的動(dòng)畫(huà)。

animation和transition是我們經(jīng)常用到的屬性。這兩個(gè)屬性的區(qū)別就是，一個(gè)需要手動(dòng)觸發(fā)，一個(gè)不需要手動(dòng)觸發(fā)。

 它們的 觸發(fā)條件不同。transition通常和hover等事件配合使用，由事件觸發(fā)。animation則立即播放。 循環(huán)。 animation可以設(shè)定循環(huán)次數(shù)。animation可以設(shè)定每一幀的樣式和時(shí)間。tranistion 只能設(shè)定頭尾。 animation中可以設(shè)置每一幀需要單獨(dú)變化的樣式屬性， transition中所有樣式屬性都要一起變化。

在我們之前做的網(wǎng)站中，嬰貝兒就添加了一個(gè)動(dòng)畫(huà)。頁(yè)面右側(cè)的園一直循環(huán)。用的就是animate。

添加一個(gè)標(biāo)簽，畫(huà)一個(gè)鏤空的小圓，然后用animation設(shè)置自己想要的效果。需要學(xué)習(xí)一下 @keyframes 規(guī)則。@keyframes 規(guī)則用于創(chuàng)建動(dòng)畫(huà)。在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫(huà)效果。

兩個(gè)搭配使用，就可以寫(xiě)出想要的效果了。

分享的完畢，如果想看到更多的文章，請(qǐng)關(guān)注山東文匯信息服務(wù)有限公司，再見(jiàn)~