CSS3動(dòng)畫(huà)無(wú)限循環(huán)的停頓方法

在CSS3中，實(shí)現(xiàn)動(dòng)畫(huà)的無(wú)限循環(huán)并添加停頓效果，可以通過(guò)使用animation-timing-function屬性來(lái)實(shí)現(xiàn)，這個(gè)屬性允許你定義動(dòng)畫(huà)的速度曲線(xiàn)，從而實(shí)現(xiàn)停頓效果。

以下是一個(gè)示例，展示了一個(gè)元素在無(wú)限循環(huán)的動(dòng)畫(huà)中如何停頓：

@keyframes example {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
.my-element {
  animation: example infinite;
  animation-timing-function: steps(2, start);
}

在這個(gè)示例中：

@keyframes example 定義了一個(gè)名為example的關(guān)鍵幀動(dòng)畫(huà)，其中元素從0度旋轉(zhuǎn)到180度，再到360度，完成一個(gè)完整的循環(huán)。

animation: example infinite; 將example動(dòng)畫(huà)應(yīng)用到.my-element元素上，并設(shè)置動(dòng)畫(huà)為無(wú)限循環(huán)。

animation-timing-function: steps(2, start); 定義了動(dòng)畫(huà)的速度曲線(xiàn)，使用steps函數(shù)在每一步之間添加停頓。steps(2, start)表示動(dòng)畫(huà)將分為2步，每一步從0度到180度，然后在180度到360度之間添加停頓。

通過(guò)調(diào)整steps函數(shù)的參數(shù)，你可以控制動(dòng)畫(huà)的循環(huán)次數(shù)、每一步的旋轉(zhuǎn)角度以及停頓的時(shí)間，這種方法提供了一種靈活的方式來(lái)控制CSS3動(dòng)畫(huà)的循環(huán)和停頓效果。