CSS3 animation behaves unexpected

See more:

CSS

HTML

Hello!

I have been working on an animation of a ball rolling and falling off an edge. First, I made a version which just rolls, and the stops. Working fine. But then, when I added the falling animation to the same code, it doesn't roll it, and I can't do anything about it.
here is the first snippet:

@-webkit-keyframes roll{
	0% {
		-webkit-animation-timing-function: ease-in; 
		-webkit-transform: translateX(0px) rotate(0deg);
	}
	50% {
		-webkit-transform: translateX(480px) rotate(360deg);
	}
}

then the second:

@-webkit-keyframes rollandfall{
	0% {
		-webkit-animation-timing-function: ease-in; 
		-webkit-transform: translateX(0px) rotate(0deg);
	}
	50% {
		-webkit-transform: translateX(480px) rotate(360deg);
	}
	85% {
		-webkit-animation-timing-function: ease-in;
		-webkit-transform: translate(480px, 400px) rotate(360deg);
	}
	95% {
		animation-timing-function: ease-out;
		-webkit-transform: translate(480px, 380px);
	}
	100% {
		animation-timing-function: ease-in;
		-webkit-transform: translate(480px, 400px);
	}
}

(I know it's only for safari and chrome, but I want to finish it before making it accessible in every browser)
and here is the link to the animation.

Thanks for any help!