Question

我想制作背景动画。以前我使用了以下简单的CSS解决方案：

#splash {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 2em solid #232323;
  border-bottom: 2em solid #232323;
  background-image: url("../img/splash.jpg");
  background-size: cover;
  background-position: 0 100%;
  animation: moveSplash 15s ease-in-out infinite alternate;
  -moz-animation: moveSplash 15s ease-in-out infinite alternate;
  -webkit-animation: moveSplash 15s ease-in-out infinite alternate;
  /* Safari 4.0 - 8.0 */
  transition: opacity .5s;
  z-index: 1;
}

@keyframes moveSplash {
    from {
        background-position-y: 100%;
        background-position-x: 0%;
    }
    to {
        background-position-y: 0%;
        background-position-x: 100%;
    }
}

完美无缺：

每当屏幕比较高时，背景图片开始从底部移动到顶部，并且它与窗口的宽度相同
每当屏幕比较宽时，背景图片开始从左向右移动，并且它与窗口的高度相同

但是，这个方法存在一个主要问题：动画非常激动，这就是我开始玩transition和transform: translate()的原因，但是然后我无法使图像完美贴合。

是否有任何解决方法可以实现平滑的背景图像动画，使其保持覆盖大小？

另一个解决方案可以将图片width和height设置为100%，将object-fit设置为cover }。在此之后，我需要通过Javascript或jQuery获取图像的计算新维度，但是，我尝试过.width，.naturalWidth，.offsetWidth，.clientWidth，然后他们返回0.当我尝试这个时：

var oImg = document.getElementById('splash');

window.getComputedStyle(oImg).transformOrigin.split(' ')[0].replace('px', '')
window.getComputedStyle(oImg).transformOrigin.split(' ')[1].replace('px', '')

我得到窗口的尺寸（因为对象的宽度和高度设置为100％），而不是调整大小的图像的新尺寸。如果我能得到图像的新尺寸，我可以在找到最大X和Y值的位置进行计算。

任何想法我怎么能让这个动画顺利运作？

Answer 1

我建议动画整个元素，而不是在background-image本身上执行动画，这很慢，我建议动画整个元素。

从我可以看到你试图对角线背景动画？不是水平而不是垂直？

@keyframes moveSplash {
    from {
        transform: translateY(100%);
        transform: translateX(0%);
    }
    to {
       transform: translateY(0%);
        transform: translateX(100%);
    }
}

如果你在使用翻译时无法使图像完美地适合div，那么这也许就是你的问题应该是关于什么的，因为它在{{1}上执行过渡是一种“非常规” （因为它很慢）而不是整个元素（它更好地利用了可用内存，因此，再次 - 更快）。

动画覆盖大小的背景顺利

1 个答案: