CSS3 animation - image keeps moving when div's width changes - css

Question

I'm trying to mimic sites like: http://shiz.co/ and http://www.maison-vignaux.com/work
The way the images show up, it's like they're not moving, but more of it gets shown in an interval. I want this type of animation. Right now, my image moves rather than having more of it show up like the sites above.
I have no idea how to accomplish this.
Here's my fiddle: https://jsfiddle.net/z7ukk6kb/ (disregard the name of the animation)
EDIT: problem was the background position on the div. now it does what I want.
<div class="parallax-elem">
<div class="img"></div>
</div>
$('.img').addClass('slide-top');
My 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

Try removing background-position from .img.
Since you have set background-position: center center, as the width of the div increases during the animation, the background image keeps adjusting to stay centered. That's the reason it keeps moving.
$('.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>

Answer 2

The reason this happens is because you use background-position center. And that is exactly what is is doing, it is aligning you image in the center. If you'd change is to background-position: left center, the problem is fixed, as you can see in this fiddle.
You could also remove the background-position entirely, but then you will also loose you vertical alignment, you might not want that.
Also, you can make your animation a whole lot easier, you don't need keyframes:
.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%;
}