CSS3動(dòng)畫(huà)中間怎么停頓幾秒？

在CSS3中，您可以使用animation-delay屬性來(lái)在動(dòng)畫(huà)開(kāi)始之前添加一些延遲，這個(gè)屬性接受一個(gè)時(shí)間值，表示動(dòng)畫(huà)在元素加載后多久開(kāi)始播放。

如果您有一個(gè)名為my-animation的動(dòng)畫(huà)，您希望它在頁(yè)面加載后5秒開(kāi)始播放，您可以這樣寫(xiě)：

.my-element {
  animation-name: my-animation;
  animation-delay: 5s;
}

這將在頁(yè)面加載后5秒開(kāi)始播放my-animation動(dòng)畫(huà)。

animation-delay屬性不會(huì)改變動(dòng)畫(huà)的持續(xù)時(shí)間，它只是在動(dòng)畫(huà)開(kāi)始之前添加了一些延遲，如果您的動(dòng)畫(huà)原本持續(xù)10秒，加上5秒的延遲后，動(dòng)畫(huà)的總持續(xù)時(shí)間仍然是10秒，但會(huì)在頁(yè)面加載后5秒開(kāi)始播放。

animation-delay屬性可以接收負(fù)值，表示動(dòng)畫(huà)在元素加載后立即開(kāi)始播放，但會(huì)在指定的時(shí)間內(nèi)暫停，然后再繼續(xù)播放，如果您希望動(dòng)畫(huà)在加載后立即開(kāi)始播放，但在前2秒內(nèi)暫停，您可以這樣寫(xiě)：

.my-element {
  animation-name: my-animation;
  animation-delay: -2s;
}

這將在頁(yè)面加載后立即開(kāi)始播放my-animation動(dòng)畫(huà)，但在前2秒內(nèi)暫停，動(dòng)畫(huà)將繼續(xù)播放，持續(xù)時(shí)間為10秒（假設(shè)原本持續(xù)時(shí)間為10秒）。