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?
codice:
<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') }
}