logo标签列表

CSS背景位置动画从右到左

cssanimationbackground-imagebackground-position
12

我想要为背景图像添加动画效果，使其从右到左出现。 我使用的图像宽度大于包含背景的div容器。在开始时，背景是以下内容：

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

但当页面加载时，我希望背景能够动画化，以便它被定位在左边。这应该需要2秒钟的时间，并且只应该完成一次。（之后图像应该被定位到左侧）。

我不想使用任何鼠标事件或伪类。有没有一种只使用CSS就可以实现动画的方法？我尝试过使用关键帧找到解决方案，但没有成功。

https://dev59.com/wWjWa4cB1Zd3GeqPoj2y - adeneo
只需使用CSS3动画化“background-Position”属性。 - Chandrakant
为 CSS3 位置添加延迟或创建一个 jQuery 事件 "Load" 处理程序来确定图像在转换之前是否已加载。 - Karl Adler
5个回答
24

你可以尝试使用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;
}

例子在这里: http://jsfiddle.net/verber/6rAGT/5/

希望这是你需要的。

2
动画一直运行，所以我稍微改了一下。现在它只运行一次，不会重置到开始的位置：--> 动画：animatedBackground 10秒线性向前； - Maexwell
1

工作链接: 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，没有事件，我们仍然得到想要的结果！
0

你需要使用动画和数字来表示数值，这样可以计算出起始点和终点之间每个位置的值。基本上它应该是：

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

演示

为了在加载时触发动画，您可以通过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;
  }
}
-1

您已标记了JQuery，因此我将为您提供该JQuery功能的函数。

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

针对类：

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

根据您想要的位置，您可以更改“Left”值。

1
这将使div动起来，而不是背景位置。 - Atal Shrivastava
你可以将图片包含在你的 div 中。我目前正在我的项目中这样做。 - Harsh
最好将其包裹在 div 中，以实现跨浏览器的响应性。 - Harsh
但是这样做并没有使背景图片的位置动画化，实际上你是在动画化 div 的位置。 - Atal Shrivastava
重新阅读一下问题，伙计，他并没有要求你对 div 进行动画。实际上，@adeneo 已经给出了一个非常好的例子。只需按照他在评论中提供的链接访问该问题即可。 - Atal Shrivastava
显示剩余2条评论
-2

将position:relative;设置到图像上，例如使用left:50%;，并在document.ready事件中使用jquery animate将左侧值减少到例如0。

查看this fiddle

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接