css animacja

Question

Witam.

Mam taką oto animację:

#div_ruchomy {
        width: 300px; height: 300px;
        background-image: url('img/003.jpg');
        animation:ani001 5s ease-in-out 0s infinite alternate backwards;
}

@keyframes ani001
{
  0% { background-position:0 0; }
  100% { background-position:0 -500px; }
}

Jak zrobić aby po dojechaniu do 100% animacja zatrzymała się na ileś sekund, po czym została powtarzana

?

EDIT: chodzi głównie o zapałzowanie animacji na 5 sekund np. Z resztą sobie poradzę.

Zapomniałem dodać, że wiem o animation-delay, wtedy mam efekt taki ,że animacja na początku startuje z opóźnieniem a ja chciałbym aby była powtarzana i po każdym przesunięciu tła pauzowała na 5 sekund

Answer 1

Trzeba doliczyć czas przesunięcia do czasu trwania animacji i równocześnie pamiętać, żeby animacja kończyła się gdzieś w połowie (czyli klatka odpowiadająca pierwotnemu czasowi musi odpowiadać ostatniej, nowej).

PoC: http://jsfiddle.net/Comandeer/o8bhdr4d/

W drugą stronę przerwa jest dłuższa, ponieważ jak animacja idzie od tyłu to na początku natyka się na 5 sekund przerwy (więc wychodzi 10 sekund). Musiałbyś to jakoś rozłożyć inaczej, ale zamysł będzie identyczny.

Comments

Właśnie o to mi chodziło. Dziękuję.

Answer 2

W Jquery chyba najlepiej to zrobić. 

setTimeout(function() {
      // Tutaj umieść co chcesz zrobić 
}, 5000);

Comments

Nie używam żadnych bibliotek, muszę to pisać ręcznie.

---

Ale wiesz, że ten przykład to czysty JS bez jQuery? ;)

---

Comandeer, czy taki zapis jest dozwolony w JS? O.O

Chodzi mi o definicję funkcji w argumencie wywołania innej funkcji... Dla mnie to czysta herezja. xD Chyba że to jakaś lambda, albo co...

---

W JS takie rzeczy są na porządku dziennym.

Tak, to funkcja anonimowa.

Answer 3

Zmień 100% na 50%. Wtedy animacja "skończy się" w połowie, a pozostały czas to będzie przerwa.

Comments

Ten problem już został rozwiązany. ;) Padła pokrewna porada, wraz z ilustracją na przykładzie. Nie wnosisz nic nowego do dyskusji.