[Dr4c0]

Mirki i Mirabelki! Koduję stronę na mobile i mam problem z uruchomieniem prostej animacji.
Wszystko wszędzie śmiga elegancko na androidzie ale jest prolem na iOS. Działa to na zasadzie dodania prostej klasy do diva przez taki kod:

$(document).ready(function(){
 $("#start_animacji").on('click touchstart', function() {
 $(".tutaj_jest_div").addClass("tutaj_jest_div--start");
 });
});

dokładnie chodzi ododanie element:

 .tutaj_jest_div--start{
 -webkit-animation-play-state: running;
 animation-play-state: running;
 }

Animacja to:

 @-webkit-keyframes maszyna1_anim
 { 
 0% {background-position: center 0px;}
 100% {background-position: center 2845px;} 
 } 
 @keyframes maszyna1_anim
 { 
 0% {background-position: center 0px;}
 100% {background-position: center 2845px;} 
 }

Czy ktoś wie dlaczego wszystko wszędzie działa tylko nie na iOS? ewentualnie jak to obejść? Baaardzo proszę o pomoc :(

#css #javascript #jquery #html

[K.....c]

@Dr4c0: Nie działa animacja, czy nie działa dodanie klasy?

[Dr4c0]

@Krathac: nie działa animacja, kiedy dla danego divu zamiast wyżej opisanej animacji testowo zrobiłem transform: scale to go zmieniało, chociaż z pominięciem timelinu

[TeflonDon]

@Dr4c0: zerknij, może kwestia zmiany shorthandu na dłuższy zapis?
https://stackoverflow.com/questions/9211261/css3-animation-not-working-in-safari

[Dr4c0]

@TeflonDon: @Krathac: otóż animacja działa normalnie jeśli w pierwszej klasie wywale "animation-play-state: paused;", więc mogłoby się wydawać, że jest problem z dodaniem klasy. Jednak gdy zamiast animacji wezmę po prostu transform to tę klasę jednak dodaje normalnie. Nigdzie nie mogę znaleźć rozwiązania...

[K.....c]

@Dr4c0:

Workaround approach for iOS 8-9 Safari that use -webkit-animation: none !important; instead of -webkit-animation-play-state:paused; This approach is for GWD, but can apply otherwise

Don't use Pause event in GWD (Google Web Designer)
Create normal event that calls a javascript function, set "-webkit-animation: none !important;" to the (you can add/remove css class)
https://stackoverflow.com/questions/27362216/webkit-animation-play-state-not-working-on-ios-8-1-probably-lower-too
Może to?
A próbowałeś zmienić klasę za pomocą element.setAttribute('class', 'tutajjestdiv--start')?

[Dr4c0]

@Krathac: Ok, problem rozwiązany ale w inny sposób. Problem był z animation-play-state. Więc za radą kolegi po prostu to wywaliłem, a część klasy która odpowiadała za animację przeniosłem z tej pierwszej do tej która jest dodawana po kliknięciu na button.