使用CSS3動畫更改背景圖片

爲什麼這不起作用？我究竟做錯了什麼？使用CSS3動畫更改背景圖片

CSS

@-webkit-keyframes test { 
    0% { 
    background-image: url('frame-01.png'); 
    } 
    20% { 
    background-image: url('frame-02.png'); 
    } 
    40% { 
    background-image: url('frame-03.png'); 
    } 
    60% { 
    background-image: url('frame-04.png'); 
    } 
    80% { 
    background-image: url('frame-05.png'); 
    } 
    100% { 
    background-image: url('frame-06.png'); 
    } 
} 

div { 
    float: left; 
    width: 200px; 
    height: 200px; 
    -webkit-animation-name: test; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: 2; 
    -webkit-animation-direction: alternate; 
    -webkit-animation-timing-function: linear; 
}

DEMO

http://jsfiddle.net/hAGKv/

提前感謝！

來源

2011-09-06 Charles Thomason

你在什麼瀏覽器中檢查它？：D –

在Google Chrome ... :-( –

您是否有此代碼的鏈接？ –

背景圖像不是可以動畫的屬性 - 你不能補間屬性。

相反，嘗試使用position：absolute將所有圖像放在彼此的頂部，然後將所有圖像的不透明度設置爲0，除了您想要重複使用的圖像。

來源

2011-09-06 11:56:01

它適用於所有現代瀏覽器 – Anselm

真棒 - 它不是部分雖然它在Webkit中已經有一段時間了，但當你說所有的現代化時，你的意思是Chrome，Safari 6+，Firefox，IE10 +？將有助於澄清這個頁面的未來訪問者。）迄今爲止，已有13372個！） –

只有webkit - 剛剛測試過（這還包括Opera 15） – Anselm

就像上面所說的那樣，你不能在動畫中改變背景圖像。我發現最好的解決方案是將你的圖像放入一張精靈畫面中，然後通過改變背景位置進行動畫處理，但如果你正在爲移動設備構建，你的精靈表被限制爲小於1900x1900像素。

來源

2011-10-06 18:59:16

它適用於Chrome 19.0.1084.41測試版！

因此，在未來的某個時候，關鍵幀可能真的是......幀！

你生活在未來;）

來源

2012-05-12 21:13:58

那麼我可以改變他們在鉻。它的簡單和在Chrome中使用-webkit css屬性正常工作。

來源

2012-11-06 10:37:28

您可以通過這個代碼如下：

#cd{ 
 
    position: relative; 
 
    margin: 0 auto; 
 
    height: 281px; 
 
    width: 450px; 
 
} 
 
#cf img{ 
 
    left: 0; 
 
    position: absolute; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    transition: opacity 1s ease-in-out; 
 
} 
 
#cf img.top:hover{ 
 
    opacity: 0; 
 
}

<div id="cf"> 
 
    <img class="button" src="Birdman.jpg" /> 
 
    <img src="Turtle.jpg" class="top" /> 
 
</div>

來源

2012-12-28 05:26:15

–

這是很快速和骯髒的，但它能夠完成任務：我正在jsFiddle

#img1, #img2, #img3, #img4 { 
    width:100%; 
    height:100%; 
    position:fixed; 
    z-index:-1; 
    animation-name: test; 
    animation-duration: 5s; 
    opacity:0; 
} 
#img2 { 
    animation-delay:5s; 
    -webkit-animation-delay:5s 
} 
#img3 { 
    animation-delay:10s; 
    -webkit-animation-delay:10s 
} 
#img4 { 
    animation-delay:15s; 
    -webkit-animation-delay:15s 
} 

@-webkit-keyframes test { 
    0% { 
     opacity: 0; 
    } 
    50% { 
     opacity: 1; 
    } 
    100% { 
    } 
} 
@keyframes test { 
    0% { 
     opacity: 0; 
    } 
    50% { 
     opacity: 1; 
    } 
    100% { 
    } 
}

在我的網站使用jQuery類似的東西，但過渡時觸發用戶向下滾動頁面 - jsFiddle

來源

2013-03-25 17:07:53 apaul

linear定時功能將線性地動畫定義的屬性。對於背景圖像，它在改變動畫幀的同時似乎具有淡入淡出/調整大小的效果（不確定它是否是標準行爲，我會使用@Chukie B的方法）。

如果使用steps函數，它將離散地進行動畫處理。有關更多詳細信息，請參見MDN上的計時功能文檔。對於你的情況，請這樣做：

-webkit-animation-timing-function: steps(1,end); 
animation-timing-function: steps(1,end);

看到這個jsFiddle。

我不確定它是否是標準行爲，但是當您說只有一個步驟時，它允許您更改@keyframes部分中的起點。這樣你可以定義你的每一幀動畫。

來源

2013-05-21 20:21:20

您可以使用動畫背景位置屬性和精靈圖像。

來源

2014-05-22 16:58:18 BigBadAlien

我需要做和你一樣的事情並降落在你的問題上。我最終找到了關於從here讀到的步驟功能。

JSFiddle of my solution in action（請注意，目前在Firefox，我就讓你加入跨瀏覽線，努力保持溶液清潔雜亂）

首先我創建。然後我創建了div並將其作爲背景，但我的div只是我的精靈（100px）的大小。

<div id="cyclist"></div> 

#cyclist { 
    animation: cyclist 1s infinite steps(2); 
    display: block; 
    width: 100px; 
    height: 100px; 
    background-image: url('../images/cyclist-test.png'); 
    background-repeat: no-repeat; 
    background-position: top left; 
    }

該動畫設置爲2個步驟，整個過程需要1秒。

@keyframes cyclist { 
    0% { 
    background-position: 0 0; 
    } 
    100% { 
    background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px 
    } 
}

Thiago above mentioned the steps function但我想我會詳細說明一下。非常簡單和令人敬畏的東西。

來源

2014-12-17 20:59:14 Gazillion

我最近需要做同樣的事情。這裏有一個簡單的實現

#wrapper { width:100%; height:100%; position:relative; } 
 
#wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; } 
 
#wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; } 
 
@keyframes fadeOut { 
 
    0% { opacity:1; } 
 
    100% { opacity:0; } 
 
}

<div id="wrapper"> 
 
    <img src="img1.jpg" class="top" style="z-index:2;"> 
 
    <img src="img2.jpg" style="z-index:1;"> 
 
</div>

來源

2015-10-22 04:15:46 BlueSix

爲我工作。請注意使用background-image進行轉換。

#poster-img { 
    background-repeat: no-repeat; 
    background-position: center; 
    position: absolute; 
    overflow: hidden; 
    -webkit-transition: background-image 1s ease-in-out; 
    transition: background-image 1s ease-in-out; 
}

來源

2017-02-02 15:57:31 drtf

使用CSS3動畫更改背景圖片

回答

相關問題