Animation css background-image fluide

[luca9]

Ciao,

ho provato a creare uno script con jquery e css per il cambio immagine di un div.
Questo genera una sorta di animazione anche ben fatta.

L'unico problema è che quando vado ad aprirlo con chrome (visualizzando come IPAD) al click vedo l'oggetto in trasparenza e poi il cambio img. La cosa è macchinosa all'inizio mentre dopo il primo loop il cambio immagine è fluido.

Vi allego parte del codice. Come posso risolvere con questo effetto trasparenza al cambio immagine? C'è qualche altra soluzione?

<div id="pupazzo">
<div id="gambe"></div>
</div>

-- JQUERY
$("#pupazzo").click(function() {
    $("#gambe").css({  
        "animation": "pupazzo 0.8s infinite ",
        "-webkit-transform": "pupazzo 0.8s infinite",
        "-moz-transform": "pupazzo 0.8s infinite",
        "-o-transform": "pupazzo 0.8s infinite",
        "-ms-animation":  "pupazzo 0.8s infinite",
    });    
});

-- CSS
@keyframes pupazzo {        
        7.14% { background-image: url('../tavole images/pupazzo/pupazzo2.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        14.28% { background-image: url('../tavole images/pupazzo/pupazzo3.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        21.42% { background-image: url('../tavole images/pupazzo/pupazzo4.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        28.56% { background-image: url('../tavole images/pupazzo/pupazzo5.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        35.70% { background-image: url('../tavole images/pupazzo/pupazzo6.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        42.84% { background-image: url('../tavole images/pupazzo/pupazzo7.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        49.98% { background-image: url('../tavole images/pupazzo/pupazzo8.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        57.12% { background-image: url('../tavole images/pupazzo/pupazzo9.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        64.26% { background-image: url('../tavole images/pupazzo/pupazzo8.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        71.40% { background-image: url('../tavole images/pupazzo/pupazzo7.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        78.54% { background-image: url('../tavole images/pupazzo/pupazzo6.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        85.68% { background-image: url('../tavole images/pupazzo/pupazzo5.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        92.86% { background-image: url('../tavole images/pupazzo/pupazzo4.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        100% { background-image: url('../tavole images/pupazzo/pupazzo3.png'),url('../tavole images/pupazzo/pupazzo-senza-gambe.png') }
        
}

[luca9]

Nessuna soluzione???