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