CSS3アニメーション画像はdiv要素の幅は、私のようなサイトを模倣しようとしている

Question

を変更したときに動き続ける：http://shiz.co/とhttp://www.maison-vignaux.com/work

画像は表示方法、彼らは動いていないようなものだが、それよりは示しますある間隔で。私はこのタイプのアニメーションが欲しいです。今、私のイメージは、上記のサイトのように多くのイメージを表示するのではなく、動きます。

これを達成する方法はわかりません。 https://jsfiddle.net/z7ukk6kb/（アニメーションの名前を無視する）

EDIT：

は、ここに私のバイオリンだ問題は、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: 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%; 
}