对 div 背景图像进行动画处理

Answer 1

您可以使用 CSS3

@keyframes

来制作

background-position

的动画，例如：

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

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

有关 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，然后您希望该 div 运行 1 个动画需要多长时间，包括供应商前缀：

#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 或 W3CSschool

Answer 5

一个建议是使用伪元素。它不会遇到与背景图像相同的问题，并且可以在标记中为您节省一个额外的元素

.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%);
  }
}

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