Modifica dell’immagine di sfondo con animazioni CSS3

Perché questo non funziona? Che cosa sto facendo di sbagliato?

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/

Grazie in anticipo!

L’immagine di sfondo non è una proprietà che può essere animata: non è ansible interpolare la proprietà.

Invece, prova a disporre tutte le immagini una sopra l’altra usando la posizione: assoluta, quindi anima l’opacità di tutte loro a 0 tranne quella che desideri ripetutamente.

Funziona con la versione beta di Chrome 19.0.1084.41!

Quindi, ad un certo punto del futuro, i fotogrammi chiave potrebbero essere davvero … fotogrammi!

Stai vivendo nel futuro;)

Questo è veramente veloce e sporco, ma fa il lavoro: 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% { } } 

Sto lavorando a qualcosa di simile per il mio sito usando jQuery, ma la transizione viene triggersta quando l’utente scorre verso il basso della pagina – jsFiddle

La funzione di temporizzazione linear animerà linearmente le proprietà definite. Per l’immagine di sfondo sembra avere questo effetto dissolvenza / ridimensionamento mentre si cambiano i fotogrammi dell’animazione (non sono sicuro se si tratta di un comportamento standard, vorrei andare con l’approccio di @Chukie B).

Se si utilizza la funzione dei steps , si animerà in modo discreto. Vedere la documentazione della funzione di temporizzazione su MDN per maggiori dettagli. Per il tuo caso, fai come questo:

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

Vedi questo jsFiddle .

Non sono sicuro che sia un comportamento standard, ma quando dici che ci sarà solo un passaggio, ti permetterà di cambiare il punto di partenza nella sezione @keyframes . In questo modo puoi definire ogni fotogramma dell’animazione.

Dovevo fare la stessa cosa di te e sono arrivato alla tua domanda. Alla fine ho scoperto la funzione dei passaggi che ho letto da qui .

JSFiddle della mia soluzione in azione (Nota che funziona attualmente in Firefox, ti permetterò di aggiungere le linee crossbrowser, cercando di mantenere la soluzione pulita di disordine)

Per prima cosa ho creato un foglio sprite che aveva due frame . Poi ho creato il div e lo ho messo come sfondo, ma il mio div è solo la dimensione del mio sprite (100px).

 
#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; }

L’animazione è impostata per avere 2 passaggi e l’intero processo richiede 1 secondo.

 @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 ha menzionato sopra i passaggi, ma ho pensato di approfondire ulteriormente la cosa. Cose davvero semplici e fantastiche.

Come detto sopra, non è ansible modificare le immagini di sfondo nell’animazione. Ho trovato la soluzione migliore per mettere le tue immagini in un foglio sprite, e poi animare cambiando la posizione dello sfondo, ma se stai costruendo per mobile, i tuoi fogli sprite sono limitati a meno di 1900×1900 px.

È ansible utilizzare la proprietà sfondo-posizione animata e l’immagine sprite.

Dovevo fare la stessa cosa di recente. Ecco una semplice implementazione

 #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; } } 
 

Per me va bene. Si noti l’uso dell’immagine di sfondo per la transizione.

 #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; } 

Puoi seguire questo codice:

 #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; } 
 

Beh, posso cambiarli in chrome. È semplice e funziona bene in Chrome usando le proprietà di -webkit css.