CSS keyframe jumping at the end?

@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')
		}, 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?


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

Nope, still jumping.

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?

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