Изображение прокрутки вперед и назад с использованием анимации преобразования

Question

Предположим, у нас есть контейнер и изображение, оба с разными неизвестными размерами и пропорциями. Я хочу поместить изображение внутри контейнера, сохранить его пропорции и прокрутить его назад и вперед, чтобы вы могли видеть его целиком.

я достиг его, установив изображение в качестве фона обложки и с помощью фон-позиции анимации:

HTML:

<div class="animated-background-image"></div> 

CSS:

.animated-background-image { 
    background-image: url(http://images.apple.com/v/home/dd/images/gallery/macbookpro_large_2x.jpg); 
    width: 100%; height: 100px; 
    background-size: cover; 
    animation: animatedBackground 5s ease-in-out infinite alternate; 
} 

@keyframes animatedBackground { 
    from { background-position: 0 0; } 
    to { background-position: 100% 100%; } 
} 

https://jsfiddle.net/a6uc8ruL/

Но анимация фонового положения тяжелая и не очень гладкая по сравнению с анимацией положения преобразования.

Так что я хочу перевести изображение вверх и вниз (или влево и вправо, если это пейзаж) от 0px до (parent_size - image_size). Как вычислить это значение или есть ли другое решение?

Answer 1

Несчастный случай пришел к частичному решению: для анимации положения и перемещения элемента, при центрировании изображения по вертикали.

from { top: 0%; transform: translateY(0%); } 
    to { top: 100%; transform: translateY(-100%); } 

https://jsfiddle.net/a6uc8ruL/5/

Но есть анимируемое два противоположные свойство, глюки изображения назад и вперед в конце концов. Таким образом, требуется оживить только одно свойство перевода. И раздражающая часть - этот подход требует различных анимаций для вертикальной и горизонтальной прокрутки.