animation CSS3 - l'image continue de se déplacer lorsque la largeur de div change

Question

Je suis en train d'imiter des sites tels que: http://shiz.co/ et http://www.maison-vignaux.com/work

La façon dont les images apparaissent, il est comme ils ne bougent pas, mais plus de celui-ci se montre dans un intervalle. Je veux ce type d'animation. En ce moment, mon image bouge plutôt que d'en voir apparaître davantage comme les sites ci-dessus.

Je n'ai aucune idée de comment accomplir ceci.

Voici mon violon: https://jsfiddle.net/z7ukk6kb/ (ne pas tenir compte du nom de l'animation)

EDIT: problème était la position de fond sur la div. maintenant, il fait ce que je veux.

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

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

Mon 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

Essayez de supprimer background-position de .img.

Étant donné que vous avez défini background-position: center center, lorsque la largeur du div augmente pendant l'animation, l'image d'arrière-plan reste ajustée pour rester centrée. C'est la raison pour laquelle ça continue à bouger.

$('.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

La raison pour laquelle cela se produit est parce que vous utilisez le centre background-position. Et c'est exactement ce que fait, c'est aligner votre image au centre. Si vous souhaitez modifier est à background-position: left center, le problème est résolu, comme vous pouvez le voir in this fiddle.

Vous pouvez également supprimer complètement la position d'arrière-plan entièrement, mais alors vous perdrez également votre alignement vertical, vous pourriez ne pas vouloir cela.

En outre, vous pouvez faire votre animation beaucoup plus facile, vous n'avez pas besoin: les images clés

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