animacja css+javascript

Question

Witam.

Mam następujący problem:

Wrzucam sobie javascriptem obrazki jako tło to diva (co ileśtam sekund)

także przy pomocy javascriptu startuję animacje, która jest zapałzowana.

#div_ani {
        width: 200px; height: 200px;

        animation-name: ani001;
        animation-duration: 3s;
        animation-iteration-count: 1;
        animation-delay: 0;
        animation-play-state: paused;
}

@keyframes ani001
{
  0% { opacity: 0; }
  100% { opacity: 1; }
}

<script>
window.onload = img_replace;

function img_replace ()
        {
        var ile_img = 4; //--- ilosc img do zaladowania
        var interwal_id;
        var z = 1;
        interwal_id = setInterval(function ()
                {
                document.getElementById('div_ani').style.background="url('img/"+z+".png')";

                document.getElementById('div_ani').style.animationPlayState = "running";
                z++;
                if (z >= ile_img)
                        {
                        z=1;
                        }
                }, 10000);
        }
</script>

Animacja działa za pierwszym razem, ponieważ animation-iteration-count: 1;

 

chciałbym jakoś zresetować javascriprem tę animację tylko nie wiem jak

PS: animation-iteration-count: 1; nie chcę zmieniać na nieskończoność bo będę musiał to rzeźbić na zasadzie synchronizacji (dopasowywać czas animacji css z czasem zmiany obrazka JS)

Answer 1

A jeśli przypiszesz animację do klasy i będziesz ją dopinał i odpinał od elementu?

Comments

zaraz zobaczę

Chodzi ci o to, że zamiast id użyć klasy?

Czy o jakim przypinaniu mówisz?

---

Przerzucić animację do osobnej klasy i operować nią.

.animation
{
    animation: itd;
}

Jak ma się odpalić animacja → dodać klasę. Jak trzeba ja zresetować → usunąć i dodać klasę na nowo.

---

Wiec wygląda to tak:

Gdy w stylu div ma klasę zamiast id nie działa w ogóle JS, który podmienia obrazek

 

Powróciłem więc do id

Stworzyłem dodatkowe dwie puste klasy w css

.ppp{/*pusta klasa*/}

.ppp1{/*pusta klasa*/}

a w js zrobiłem tak:

function img_replace ()
        {
        var ile_img = 4; //--- ilosc img do zaladowania
        var interwal_id;
        var z = 1;
        interwal_id = setInterval(function ()
                {
                document.getElementById('div_avi).setAttribute("class", "ppp1");

                document.getElementById('div_avi).setAttribute("class", "ppp");

                document.getElementById('div_ani').style.background="url('img/"+z+".png')";

                document.getElementById('div_ani').style.animationPlayState = "running";
                z++;
                if (z >= ile_img)
                        {
                        z=1;
                        }
                }, 5000);
        }

Gdy wywalę document.getElementById('div_avi).setAttribute... to skrypt podmienia obrazki

EDIT:

Swoją drogą uważam, że niestworzenie funkcji, która resetowała by animację do pierwszej klatki to lekka porażka dla twórców css3

---

Tak teraz patrzę: tutaj starczy zwykłe transition: http://jsfiddle.net/Comandeer/x586xgum/