使用变换动画来回滚动图像答案

【问题标题】：Image scrolling back and forth using transform animation使用变换动画来回滚动图像
【发布时间】：2017-02-05 00:41:34
【问题描述】：

假设我们有一个容器和图像，它们都具有不同的未知大小和比例。我想将图像放入容器中，保存它的比例，然后来回滚动它，这样你就可以看到它的整体。

我是通过将图片设置为背景封面并使用背景位置动画来实现的：

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）。我如何计算这个值或有其他解决方案吗？

【问题讨论】：

标签： css

【解决方案1】：

无意中找到了一个部分解决方案：为元素的位置和平移设置动画，与垂直居中图像时相同。

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

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

但是由于动画有两个相反的属性，图像最终会前后出现故障。所以只需要为一个 translate 属性设置动画。还有烦人的部分——这种方法需要不同的垂直和水平滚动动画。

【讨论】：