近年來(lái)，使用CSS3動(dòng)畫來(lái)制作各種精美的動(dòng)畫效果已經(jīng)成為了網(wǎng)頁(yè)設(shè)計(jì)師的一個(gè)重要技能之一。然而，有時(shí)候我們需要在一個(gè)元素上多次觸發(fā)CSS3動(dòng)畫，這個(gè)時(shí)候就需要一些特殊的技巧來(lái)實(shí)現(xiàn)了。

/* 一次觸發(fā) */
@keyframes spin {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
.box {
animation: spin 1s linear;
}
/* 多次觸發(fā) */
@keyframes shake {
0% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
100% { transform: translateX(0); }
}
.box {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
}

上面的代碼演示了如何實(shí)現(xiàn)一個(gè)元素多次觸發(fā)CSS3動(dòng)畫的效果。通過(guò)設(shè)置動(dòng)畫的時(shí)間和速率，使得元素在動(dòng)畫完成之后沒(méi)有變化，從而達(dá)到多次觸發(fā)動(dòng)畫的目的。

除了以上的技巧之外，我們還可以使用一些jQuery插件來(lái)實(shí)現(xiàn)元素多次觸發(fā)CSS3動(dòng)畫的效果。例如，Animate.css插件可以讓我們輕松地在元素上應(yīng)用多個(gè)CSS3動(dòng)畫。

總之，多次觸發(fā)CSS3動(dòng)畫可以讓我們創(chuàng)造出更加精美的動(dòng)畫效果，從而吸引更多用戶對(duì)我們的網(wǎng)頁(yè)產(chǎn)生興趣。