È possibile riavviare una gif con CSS (senza JS)?

Question

quindi ho un pezzo di CSS in questo modo:

.three-image-widget div.hover-icon img.original { display: block; } 
.three-image-widget div.hover-icon img.hovered { display: none; } 
.three-image-widget div.hover-icon:hover img.original { display: none; } 
.three-image-widget div.hover-icon:hover img.hovered { display: block; } 

ho .original immagini come .png s e le .hovered immagini sono animate .gif s che voglio cominciare, quando si libra sopra gli div.hover-icon elementi. So che è possibile farlo con un JavaScript incidere come questo:

$('div.hover-icon').hover(function(){ 
    $(this).find('.original').hide(); 
    var hov = $(this).find('.hovered'), 
     copy = hov.attr('src'); 
     hov.attr('src','').attr('src',copy); 
}); 

ma posso fare l'equivalente con CSS puro?

Answer 1

No, non è possibile. Devi ricaricare la GIF e il CSS non può farlo.

Answer 2

La cosa più vicina che riuscivo a capire con CSS puro sta cambiando URL :hover ma sarà ripristinato quando:

div { 
 
    background-image: url(http://i.imgur.com/6wffOji.gif); 
 
    height:50px; 
 
    width: 100px; 
 
} 
 

 
div:hover { 
 
    background-image: url(http://i.imgur.com/6wffOji.gif?v=1); 
 
}

<div></div>

Questo approccio richiederebbe di utilizzare background-image invece di <img> etichetta.

---

Edit: altro metodo sarebbe convertire le immagini GIF per una sprite 1 colonna, dove ogni fotogramma è posto in una fila, sotto l'altro, quindi utilizzare CSS @keyframes e animation avere un migliore controllo sulla l'animazione delle immagini, si potrebbe invertire, si alternano, la durata di controllo ecc

semplice GIF (animato):

GIF sprite (nessuna animazione, immagine statica):

Codice:

div { 
 
    height:50px; 
 
    width: 100px; 
 
    background-image: url(http://i.imgur.com/3YMNTbS.gif); 
 
} 
 

 
div:hover { 
 
    animation: gif steps(6) 0.5s forwards; 
 
} 
 

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

<div></div>

Come si può vedere, lo stato :hover spara le gif fotogrammi chiave di animazione. la funzione steps(n) è la chiave qui, iterà attraverso i fotogrammi in fasi invece di una transizione continua. n è il numero di frame nel tuo sprite.

Ho utilizzato SpritePlane per generare lo sprite con Photoshop. È facile creare uno sprite e le dimensioni sono quasi le stesse, è possibile salvare un JPEG per una maggiore compressione o PNG per un canale alfa semplice (può anche essere compresso).