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/

但由于动画有两个相反的属性，因此图像最终会反复出现故障。因此，只需要为一个翻译属性设置动画。令人讨厌的部分 - 这种方法需要不同的动画来进行垂直和水平滚动。

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

1 个答案: