CSS3 动画 - 当 div 的宽度改变时图像保持移动

Question

我正在尝试模仿以下网站:http://shiz.co/和 http://www.maison-vignaux.com/work

图像显示的方式，就像它们没有移动一样，但更多的图像会在一段时间内显示。我想要这种类型的动画。现在，我的图像移动了，而不是像上面的网站那样显示更多。

我不知道如何完成这个。

这是我的 fiddle :https://jsfiddle.net/z7ukk6kb/ (忽略动画名称)

编辑:问题是 div 上的背景位置。现在它做我想做的事。

 <div class="parallax-elem">
   <div class="img"></div>
 </div>

$('.img').addClass('slide-top');

我的 CSS:

.slide-top {
  -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-top {
  0% {
      width:0;
  }
  100% {
      width:100%;
  }
}

.parallax-elem {
  overflow:hidden;
  position: absolute;
  height:600px;
  width:100%;
}

.parallax-elem:after {
  content:"";
  background-color:#eee;
  width:100%;
  height:100%;
  top:0;
  left:0;
  right:0;
  position: absolute;
  z-index:10;
}

.img {
  background:url('http://media.nj.com/entertainment_impact_dining/photo/coffee-stock-photo-0e8b300f42157b6f.jpg') no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  height: 100%;
  z-index:11;
    width: 100%;
}

Answer 1

尝试从 .img 中删除 background-position。

由于您设置了 background-position: center center，随着 div 的宽度在动画期间增加，背景图像会不断调整以保持居中。这就是它不断移动的原因。

$('.img').addClass('slide-top');

.slide-top {
          animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both infinite;
}


@keyframes slide-top {
  0% {
            width:0;
  }
  100% {
            width:100%;
  }
}

body {
  max-width:800px;
	margin:0 auto;
	position:relative;
}

.parallax-elem {
  overflow:hidden;
  position: absolute;
  height:600px;
  width:100%;
}

.parallax-elem:after {
  content:"";
  background-color:#eee;
  width:100%;
  height:100%;
  top:0;
  left:0;
  right:0;
  position: absolute;
  z-index:10;
}

.img {
  background:url('http://media.nj.com/entertainment_impact_dining/photo/coffee-stock-photo-0e8b300f42157b6f.jpg') no-repeat;
  background-size: cover;
  position: relative;
  height: 100%;
  z-index:11;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax-elem">
    <div class="img"></div>
</div>