CSS控制圖片動(dòng)畫時(shí)間的方法

在CSS中，我們可以使用animation屬性來(lái)控制圖片動(dòng)畫的持續(xù)時(shí)間，以下是一個(gè)簡(jiǎn)單的示例，展示如何讓圖片動(dòng)畫持續(xù)3秒：

1、定義一個(gè)動(dòng)畫：

@keyframes example {
  0% {background-position: 0 0;}
  100% {background-position: 100% 100%;}
}

這個(gè)動(dòng)畫會(huì)將背景位置從0 0移動(dòng)到100% 100%，這通常用于創(chuàng)建背景圖像的動(dòng)畫效果。

2、將這個(gè)動(dòng)畫應(yīng)用到圖片上，并設(shè)置持續(xù)時(shí)間為3秒：

.image-container {
  width: 200px;
  height: 200px;
  background-image: url('image.png');
  animation: example 3s linear;
}

在這個(gè)示例中，圖片被放置在一個(gè)名為.image-container的容器中，并使用animation屬性應(yīng)用了之前定義的動(dòng)畫。3s表示動(dòng)畫將持續(xù)3秒，linear表示動(dòng)畫將勻速進(jìn)行。

3、確保你的HTML中包含了這個(gè)容器：

<div class="image-container"></div>

當(dāng)頁(yè)面加載時(shí)，圖片動(dòng)畫將會(huì)持續(xù)3秒，你可以根據(jù)需要調(diào)整動(dòng)畫的其他屬性，如延遲、循環(huán)次數(shù)等。