动画 CSS 背景位置具有平滑的结果（子像素动画）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21087518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animate CSS background-position with smooth results (sub-pixel animation)
提问by Jayden Lawson
I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here:
我正在尝试缓慢地为 div 的背景位置设置动画，但没有生涩的运动。你可以在这里看到我目前努力的结果：
@-webkit-keyframes MOVE-BG {
from {
background-position: 0% 0%
}
to {
background-position: 187% 0%
}
}
#content {
width: 100%;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
text-align: center;
font-size: 26px;
color: #000;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
I have been at this for hours and can't find anything that will animate slowly and smoothly at a sub-pixel level. My current example was made from the example code on this page: http://css-tricks.com/parallax-background-css3/
我已经在这工作了几个小时，找不到任何可以在子像素级别缓慢而流畅地动画的东西。我当前的示例是根据此页面上的示例代码制作的：http: //css-tricks.com/parallax-background-css3/
The smoothness of animation I'm after can be seen on this page's translate() example:
可以在此页面的 translate() 示例中看到我所追求的动画的平滑度：
http://css-tricks.com/tale-of-animation-performance/
http://css-tricks.com/tale-of-animation-performance/
If it can't be done with the background-position, is there a way to fake the repeating background with multiple divs and move those divs using translate?
如果不能通过背景位置完成，有没有办法用多个 div 伪造重复背景并使用翻译移动这些 div？
采纳答案by Slawa Eremkin
Checkout this example:
签出这个例子：
#content {
height: 300px;
text-align: center;
font-size: 26px;
color: #000;
position:relative;
}
.bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
animation-name: MOVE-BG;
animation-duration: 100s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes MOVE-BG {
from {
transform: translateX(0);
}
to {
transform: translateX(-187%);
}
}<div id="content">Foreground content
<div class="bg"></div>
</div>回答by Bruno Muller
Animating background-position will cause some performance issues. Browsers will animate transform properties much cheaply, including translate.
动画背景位置会导致一些性能问题。浏览器将非常便宜地动画转换属性，包括翻译。
Here is an example using translate for an infinite slide animation (without prefixes):
这是一个使用 translate 用于无限幻灯片动画（无前缀）的示例：
http://jsfiddle.net/brunomuller/5pVr4/504/
http://jsfiddle.net/brunomuller/5pVr4/504/
@-webkit-keyframes bg-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.wrapper {
position:relative;
width:400px;
height: 300px;
overflow:hidden;
}
.content {
position: relative;
text-align: center;
font-size: 26px;
color: #000;
}
.bg {
width: 200%;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x;
position:absolute;
top: 0;
bottom: 0;
left: 0;
animation: bg-slide 20s linear infinite;
}
回答by Surjith S M
You should adjust your HTML and CSS little bit
你应该稍微调整一下你的 HTML 和 CSS
HTML
HTML
<div id="wrapper">
<div id="page">
Foreground content
</div>
<div id="content"> </div>
</div>
CSS
CSS
@-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -2000px; }
}
#wrapper {
position:relative;
width:800px;
height: 300px;
overflow:hidden;
}
#page {
text-align: center;
font-size: 26px;
color: #000;
}
#content {
width: 2000px;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
position:absolute;
top: 0;
left: 0;
z-index:-1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
