流畅的背景动画答案

【问题标题】：Smooth background animation流畅的背景动画
【发布时间】：2016-07-21 23:52:15
【问题描述】：

有没有办法让它更流畅？或者，如果有人知道如何更好地做到这一点，我会全神贯注。这是我所拥有的

html {
    background: url(Images/landscape.jpeg)repeat-y;
    background-size: 150%;
    background-position: bottom;
    -webkit-animation: backgroundScroll 190s linear infinite;
    animation: backgroundScroll 190s linear infinite;
}

@-webkit-keyframes backgroundScroll {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -400px 0;
    }
}

@keyframes backgroundScroll {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -400px 0;
    }
}

【问题讨论】：

你忘记了 HTML（你的 HTML 是 CSS）:)
html 并不重要，它只是背景元素，您可以看到我在 CSS 中所做的事情。背景应用于html。没有内容

标签： html css

【解决方案1】：

在一个元素上设置背景图像然后使用transform: translate移动整个元素可能会得到更好的结果：

@keyframes doScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-400);
  }
}

查看这个较旧但仍然相关的article。

【讨论】：

【解决方案2】：

我明白了！我只需要玩间隔速度。我把它放慢到 85 秒左右，它更顺畅了。我把它拖得太长了。

【讨论】：

【解决方案3】：

你可以这样做：

html {

    background: url(http://static.adzerk.net/Advertisers/c878296c4c7f43b8bbb285acb73c0e6c.png)repeat-y;
    background-size: 150%;
	background-position: 0px 0px;
	animation: animatedBackground 15s linear infinite;
	-moz-animation: animatedBackground 15s linear infinite;
	-webkit-animation: animatedBackground 15s linear infinite;
	-ms-animation: animatedBackground 15s linear infinite;
	-o-animation: animatedBackground 15s linear infinite;
}
@keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -400px 0; }
}
@-moz-keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -400px 0; }
}
@-webkit-keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -400px 0; }
}
@-ms-keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -400px 0; }
}
@-o-keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -400px 0; }
}

【讨论】：