jQuery CSS背景位置从右到左动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22781569/
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
CSS background-position animate right to left
提问by Maexwell
I'm trying to animate a background-image, so that the image appears from right to left. I have used an image which has a greater width than the div-container, where the background is located. On start, the backgrond is the following
我正在尝试为背景图像设置动画，以便图像从右向左显示。我使用的图像宽度大于背景所在的 div 容器。一开始，背景如下
background: url(../img/zeppelin.png);
background-repeat: no-repeat;
background-position: right;
but when the page is loaded, I want the background to be animated, so that it is positioned left. This should take a eg. 2 seconds and only should be done one time. (the image should be positioned left afterwards).
但是当页面加载时，我希望背景被动画化，以便它位于左侧。这应该采取例如。2 秒，并且只应该做一次。（图像应该放在左边）。
I don't wanna use any mouse-events or pseudo-classes. Is there a way to animate it by using only CSS? I tried finding a solution with keyframes without success.
我不想使用任何鼠标事件或伪类。有没有办法只使用 CSS 来制作动画？我尝试找到关键帧的解决方案，但没有成功。
回答by Andrii Verbytskyi
You could try using this tutorial: CSS Background Animation
您可以尝试使用this tutorial：CSS 背景动画
@keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
@-moz-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
@-webkit-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
@-ms-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
@-o-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
html {
width: 100%;
height: 100%;
background-image: url(background.png);
background-position: 0px 0px;
animation: animatedBackground 10s linear infinite;
-moz-animation: animatedBackground 10s linear infinite;
-webkit-animation: animatedBackground 10s linear infinite;
-ms-animation: animatedBackground 10s linear infinite;
-o-animation: animatedBackground 10s linear infinite;
}
Example here: http://jsfiddle.net/verber/6rAGT/5/
这里的例子：http: //jsfiddle.net/verber/6rAGT/5/
Hope it that what you need)
希望它是你需要的）
回答by Sagi_Avinash_Varma
working link: http://sagiavinash.com/labs/tests/css_anim/
工作链接：http: //sagiavinash.com/labs/tests/css_anim/
This is an unorthodox trick.
这是一个非正统的伎俩。
<html>
<head>
<style>
.img{
width:1000px;
height:500px;
background:url(1.jpg) no-repeat left;
transition:background-position 1s;
-ms-transition:background-position 1s;
-moz-transition:background-position 1s;
-o-transition:background-position 1s;
-webkit-transition:background-position 1s;
}
</style>
</head>
<body>
<div class="img"></div>
<link rel="stylesheet" type="text/css" href="style.css">
</body>
</html>
style.css:
样式.css：
img{
background-position:right;
whats happening here is initially the css mentioned in the <style>is rendered.
later since the external stylesheet is in the body just before </body>.
So style.css is loaded after the resources in the are loaded. so there is a lag in implementation of the css which allows us to apply a css transition.
这里发生的事情最初<style>是渲染中提到的css 。后来因为外部样式表就在</body>. 所以style.css是在加载完中的资源之后加载的。所以在 css 的实现上有一个滞后，这允许我们应用 css 过渡。
NO JAVASCRIPT, NO EVENTS still we get what we want!
没有JAVASCRIPT，没有事件，我们仍然得到我们想要的！
回答by G-Cyrillus
you need to use animation and numbers for value,so it can calculate each position in between start - end. basicly it would be :
您需要使用动画和数字作为值，因此它可以计算开始 - 结束之间的每个位置。基本上是：
html {
background:url(http://gravatar.com/avatar/21ffdef6c07de75379e31a0da98d9543?s=512) no-repeat;
background-size:10%;/* demo purpose */
background-position: 100% 0;
animation: bgmve 2s;
}
@keyframes bgmve {
to {background-position: 0 0;} /* make it short */
}
to fire animation on load you can add a class to html via javascript:
要在加载时触发动画，您可以通过 javascript 向 html 添加一个类：
onload=function() {
var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)
root.setAttribute( "class", "move" );
}
and css turns to be :
和 css 变成：
html {
background:url(http://gravatar.com/avatar/21ffdef6c07de75379e31a0da98d9543?s=512) no-repeat;
background-size:10%;
background-position: 100% 0;
}
.move {
animation: bgmve 2s;
}
@keyframes bgmve {
to {background-position: 0 0;
}
}
回答by Harsh
You have tagged Jquery. So will provide you with Jquery function for that.
您已标记 Jquery。因此将为您提供 Jquery 功能。
$( "#ID" ).animate({
left: "50px",
}, 2000);
For class:
上课：
$( ".class" ).animate({
left: "50px",
}, 2000);
You can change your value of "Left" acc. to the position you want to give.
您可以更改“左”acc 的值。到你想给的位置。
回答by Karim AG
set position:relative;to the image with left:50%;for example and on document.ready event reduce the left value to e.g. 0 using jquery animate.
设置position:relative;为图像，left:50%;例如在 document.ready 事件上使用 jquery animate 将左值减少到例如 0。
Check out this fiddle
看看这个小提琴
