修改

Question

我在div中使用

创建了一个图像

<div style="background-image: url(...);></div>

这是非常大的。

我想在背景图片中做一些动作。所以我想放大一点并进行一些翻译，所以看起来图像移动了一点点。

我希望它无限循环。

我尝试将Animate.css与<div class="animated pulse infinite"></div>一起使用，但我不希望div移动，只有div中的背景照片。脉冲效应也有点太多了。我只是希望它有一点动作。也许只是在x方向向左翻译，然后向右翻译

修改

我试过了

@keyframes animatedBackground {
  from {
    background-size: cover;
    background-position: 50% 22%;
  }
  to {
    background-size: cover;
    background-position: 100% 22%;
  }
}

但如果我使用background-size: cover似乎无效？

编辑2

我发现它确实有效，但宽度是100％，所以如果我使用background-position: 50% 22%;或background-position: 100% 22%;，它没有任何区别，但是如果我改变y方向，它确实有效:-D

但如果我将动画时间设置为超过5秒的秒数，则会变得非常迟钝。有没有办法避免滞后？

Answer 1

您可以使用CSS3 @keyframes为background-position制作动画，例如：

＆＃13;

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
#animate-area {
  width: 200px;
  height: 200px;
  background-image: url(http://placekitten.com/400/200);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 10s linear infinite alternate;
}

＆＃13;

<div id="animate-area"></div>

＆＃13;

有关CSS动画的详细信息，请参阅MDN。

Answer 2

html, body {
    height: 100%;
    margin: 0;
}
.outer {
    height:100%;
    overflow: hidden;
}
.inner {
    height:200%;
    width:100%;
    -webkit-animation:mymove 5s linear infinite;
    /* Safari and Chrome */
    animation:mymove 5s linear infinite;
    background-image: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg');
    background-size: 100% 50%;
}
@-webkit-keyframes mymove {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
    }
}
@keyframes mymove {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
    }
}

<div class="outer">
    <div class="inner"></div>
</div>

#horizontal {
width: 200px;
height: 200px;
background: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg');
-webkit-animation: backgroundScroll 20s linear infinite;
animation: backgroundScroll 20s 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;}
}

<div id="horizontal"></div>

Answer 3

将div放在主div中。你从框架中看出来（可以这么说 - 想象相框）。

为内部div设置动画。

Answer 4

你可以在css中使用@keyframe动画来做到这一点。

以下是一些非常简单的示例：http://codepen.io/webdevpdx/pen/LNobWW

基本上你声明你的div，然后你想要1个动画运行为所述div包括供应商前缀多久：

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

然后声明动画关键帧。你告诉动画在某些点它应该是什么样子。您必须指定多少点取决于您想要做的动画。

这将是一个简单的淡入淡出动画：

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

您可以在CSS Tricks或W3CSchool

上阅读有关该主题的更多信息

Answer 5

一个建议是使用伪元素。它不会遇到背景图像相同的问题，并在标记中省去了额外的元素

＆＃13;

.anim { 
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.anim::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  background: url(http://lorempizza.com/400/400/3) no-repeat center bottom;
  animation: anim 15s linear infinite alternate;
}

@keyframes anim {
  from {
    transform: scale(1) translateX(0);
  }
  to {
    transform: scale(1.5) translateX(-50%);
  }
}

＆＃13;

<div class="anim"></div>

＆＃13;

动画div背景图像

修改

编辑2

5 个答案: