Я пытаюсь анимировать холст на трех разных слоях в onmousedown и ontouchstart. Три полотна движутся слева направо с разной скоростью, чтобы дать эффект перспективы, если не срабатывает onmouseup или ontouchend.
Я использую @ -webkit-keyframes css для анимации:
@-webkit-keyframes aCarsRight
{
from{background-position: 0px 0px;}
to{background-position: 640px 0px;}
}
.cars_move_right
{
-webkit-animation-name: aCarsRight;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
-webkit-transition-timing-function: linear;
}
То, что я хотел бы сделать, это получить текущую фоновую позицию трех слоев до отключения анимации панорамирования и установить их вручную, чтобы при удалении класса .cars_move_right из моего div он оставался в той же позиции, а не покатился вернуться в положение по умолчанию.
Есть ли способ получить фоновую позицию или просто обойти, чтобы получить то, что я хочу? Страница предназначена для iPhone и iPod Touch.
Спасибо!
Я нашел что-то интересное. Вместо захвата background-position, остановки анимации и установки background-position для моих элементов div, я приостанавливаю анимацию.
document.getElementById('global').style.webkitAnimationPlayState = 'paused';
document.getElementById('global_cars').style.webkitAnimationPlayState = 'paused';
document.getElementById('global_car').style.webkitAnimationPlayState = 'paused';
У меня еще не было возможности протестировать его на iPhone.
И вот метод, который, кажется, работает кросс-браузерно для получения любого свойства:
window.getComputedStyle (document.getElementById ( 'DIV')) [ 'фон положение'];