Question

我试图为背景图像设置动画，以便图像从右到左显示。我使用的图像宽度大于背景所在的div容器的宽度。一开始，背景是以下

background: url(../img/zeppelin.png);
background-repeat: no-repeat;
background-position: right;

但是当页面加载时，我希望将背景设置为动画，以使其位于左侧。这应该采取例如。 2秒，只应该做一次。（图像应该在之后左侧定位）。

我不想使用任何鼠标事件或伪类。有没有办法通过只使用CSS来动画它？我尝试使用关键帧找到解决方案但没有成功。

Answer 1

您可以尝试使用this tutorial：CSS Background Animation

@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;
}

此处示例：http://jsfiddle.net/verber/6rAGT/5/

希望你需要的东西）

Answer 2

工作链接：http://sagiavinash.com/labs/tests/css_anim/

这是一个非正统的伎俩。

<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：

img{
  background-position:right;

这里发生的事情最初是<style>中提到的css。之后由于外部样式表位于</body>之前的正文中。因此，在加载资源之后加载style.css。所以css的实现存在滞后，这使我们可以应用css转换。

没有JAVASCRIPT，没有事件我们仍然得到我们想要的东西！

Answer 3

您需要使用动画和数字作为值，因此它可以计算开始 - 结束之间的每个位置。基本上它会是：

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 */
}

DEMO

要在加载时触发动画，您可以通过javascript将类添加到html：

    onload=function() {
      var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)

    root.setAttribute( "class", "move" );

}

和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;
  }
}

Answer 4

您已标记Jquery。因此，将为您提供Jquery功能。

$( "#ID" ).animate({
    left: "50px",
     }, 2000);

上课：

 $( ".class" ).animate({
        left: "50px",
         }, 2000);

您可以更改“左”acc的值。到你想要的位置。

Answer 5

将position:relative;设置为带有left:50%;的图片，并在document.ready事件中将左值减少为例如0使用jquery animate。

查看 this fiddle

CSS背景位置从右到左动画

5 个答案: