Как сделать работоспособной CSS анимацию на Ipad?

Question

[Игорь]

welovepavel.esy.es/index.html



Спасибо!

Answer 1

[Алекс К]

Подозреваю, что проблема в отсутствии префиксов у animation/keyframes.
Добавьте в 2.css внизу:

@-webkit-keyframes animStar {
  from {
    -webkit-transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(-2000px);
  }
}

А затем везде, где встречается "animation: animStar..." скопируйте эту строку и перепишите на "-webkit-animation: animStar".

Comments

[Игорь]

точно,работает!
а почему когда я зумирую на 150% с планшета айпад то страница крашится и перезагружается?
как решить проблему?
https://pp.vk.me/c621716/v621716762/42c9f/shRHsMPh...

Answer 2

[Денис Инешин]

Взгляните на этот туториал. Обратите внимание на то, сколько используется префиксов. Я бы еще годик-другой их использовал, пока все браузеры точно не избавятся от них.

Comments

[Алекс К]

Не в данном случае. Все текущие браузеры уже без префикса прекрасно себя чувствуют.
shouldiprefix.com/#animations

Максимум можно еще влепить -ms-transform для поддержки IE9, а так достаточно только -webkit для поддержки Safari

[Алекс К]

Не в данном случае. Все текущие браузеры без префикса прекрасно себя чувствуют.
shouldiprefix.com/#animations

Максимум можно еще влепить -ms-transform для поддержки IE9, а так достаточно только -webkit для поддержки Safari

[Игорь]

Алексей Кауль: хм,не проще ли было просто сделать такую SVG анимацию?

[Алекс К]

Игорь: через SVG SMIL? не проще) у SMIL кросс-браузерность вообще ниже плинтуса