CSS3動(dòng)畫是一種可以通過CSS樣式表來實(shí)現(xiàn)動(dòng)態(tài)效果的技術(shù)。通過使用CSS3動(dòng)畫的方式,可以使網(wǎng)頁看起來更生動(dòng)、更有趣。在CSS3中,我們可以使用“animation”屬性來實(shí)現(xiàn)動(dòng)畫。
其中,“animation-delay”屬性是指動(dòng)畫開始之前的間隔時(shí)間,它的取值可以是秒(s)或毫秒(ms),比如:animation-delay: 2s;就表示在2秒后才開始播放動(dòng)畫。如果我們想要多個(gè)元素依次播放動(dòng)畫,可以使用不同的“animation-delay”時(shí)間,從而實(shí)現(xiàn)逐個(gè)播放的效果。
/* 定義兩個(gè)樣式,一個(gè)是元素原有樣式,一個(gè)是動(dòng)畫后的樣式 */ .box { width: 100px; height: 100px; background-color: #ccc; } .box:hover { animation: pulse 1s infinite; } /* 定義動(dòng)畫 */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* 定義多個(gè)元素依次播放動(dòng)畫 */ .box1 { animation: pulse 1s infinite; } .box2 { animation: pulse 1s infinite; animation-delay: 0.5s; } .box3 { animation: pulse 1s infinite; animation-delay: 1s; }
在上面的代碼中,我們?cè)O(shè)置了box元素的hover事件觸發(fā)動(dòng)畫效果,而box1、box2、box3元素則使用了不同的“animation-delay”時(shí)間,從而實(shí)現(xiàn)了逐個(gè)播放的效果。
通過使用CSS3動(dòng)畫的方式,我們可以讓網(wǎng)頁中的元素跳動(dòng)、旋轉(zhuǎn)、變換大小等,從而使整個(gè)頁面看起來更加生動(dòng)有趣。使用“animation-delay”屬性可以讓我們實(shí)現(xiàn)元素依次播放動(dòng)畫效果,進(jìn)一步豐富了我們對(duì)CSS3動(dòng)畫的使用。