Change background-position without animation - html

Question

I've got this code working for changing background conteniosly in CSS and HTML:
animation: animated 10s linear infinite;
#keyframes animated {
0% { background-position: 0px bottom; }
25% { background-position: -200px bottom; }
50% { background-position: -400px bottom; }
75% { background-position: -600px bottom; }
}
Currently the background moves in an animation, but I would like to have the background switch position in one go - so it seems the image changes instead of moving.
Is that possible with only CSS?

Answer 1

What you need to do is, instead of
25% { background-position: -200px bottom; }
50% { background-position: -400px bottom; }
You do it like:
25.01%, 50% { background-position: -200px bottom; }
50.01%, 75% { background-position: -400px bottom; }
Thus you will almost eliminate the time needed for transition from one keyframe to another.
Demo: jsFiddle
*{ padding:0; margin:0; }
#bg{ width:100%; height:100vh;
background: url('//www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg') no-repeat;
animation: slideshow 5s infinite;
}
#keyframes slideshow {
0%, 25% { background-position: 0px bottom; }
25.01%, 50% { background-position: -200px bottom; }
50.01%, 75% { background-position: -400px bottom; }
75.01%, 100% { background-position: -600px bottom; }
}
<div id="bg"></div>

Answer 2

Use the following:
animation: animated 10s steps(4) linear infinite;
#keyframes animated {
from {
background-position: 0px 0px; }
to {
background-position: 600px 0px; }
}

Answer 3

You can remove linear in your CSS
animation: animated 10s infinite;
#keyframes animated {
0% { background-position: 0px bottom; }
25% { background-position: -200px bottom; }
50% { background-position: -400px bottom; }
75% { background-position: -600px bottom; }
}

Answer 4

You need to use some JS with setTimeout of 10000ms to switch background-position
$(document).ready(function () {
var koef = 1;
setInterval(function () {
$('#image').css({'background-position-x': 600 * -koef});
koef = !koef;
}, 1000);
});
#image {
width: 200px;
height: 200px;
background: url(http://lorempixel.com/g/1000/200/) no-repeat 0 bottom;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image"></div>