CSS keyframe jumping at the end?

HTML-CSS
1 
@keyframes breath {
		0% {
			width: 100%;
		}
		50% {
			width: 110%;
		}
		100% {
			width: 120%;
		}
	}

.class {
-webkit-animation: breath 20s infinite;
-moz-animation:    breath 20s infinite;
-o-animation:      breath 20s infinite;
animation:         breath 20s infinite;
}

This is my slideshow JS:

$("#slideshow > div:gt(0)").hide();
		setInterval(function () {
			$('#slideshow > div:first')
				.fadeOut(1000)
				.next()
				.fadeIn(1000)
				.end()
				.appendTo('#slideshow');
		}, 4000);

Trying to make my images grow slightly bigger, and then transition on with the slideshow I have implemented. However, before they transition they go back to the start - how can I stop this?

Thanks!

2

Does using animation-fill-mode: forwards; help?

3

Nope, still jumping.

4

Look at the 20s infinite; and the setInterval with 4 sec I’m a little confused about the result you are going for.

Can you post a link to a live version of the code?

5

I’d like it to transition before resetting the picture.