CSS3动画 - 图像保持当div的宽度变化

Question

我试图模仿喜欢的网站移动：http://shiz.co/和http://www.maison-vignaux.com/work

图像显示的方式，就好像他们不动，但更多的是获得展示在一个区间。我想要这种类型的动画。现在，我的形象移动，而不是像上面的网站显示更多。

我不知道如何做到这一点。

这里是我的小提琴：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; 
 
\t margin:0 auto; 
 
\t 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>

Answer 2

之所以出现这种情况是因为你使用background-position中心。这正是正在做的事，它将你的形象调整到中心位置。如果您要更改为background-position: left center，则问题已解决，您可以看到in this fiddle。

您也可以完全删除背景位置，但是您也可能会失去垂直对齐，您可能不希望这样做。

此外，你可以让你的动画轻松许多，你不需要关键帧：

.img{ 
    width: 0%; 
    background-position: left center; 
    animation: width 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940); 
} 
.img.slide-top{ 
    width: 100%; 
}