CSS3 animation behaves unexpectedly - html

Question

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 then 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);
}
100% {
-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!
EDIT:
It seems it wasn't exactly clear what I want it to do, so
here you can check out what the first snippet does.

Answer 1

A better way, seems to 'chain' the animations:
#goRight img:hover{
-webkit-animation: roll 1s, fall 1s;
-webkit-animation-delay: 0s, 1s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes roll{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
-webkit-transform: translateX(480px) rotate(360deg);
}
}
#-webkit-keyframes fall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(480px);
}
100% {
-webkit-transform: translateX(480px) translateY(400px);
}
}
Much cleaner!

Answer 2

disclaimer: I'm no expert in CSS3, but after some tweaking, this seems to work... ish.
#-webkit-keyframes rollandfall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
5% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(48px) rotate(36deg);
}
25% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(240px) rotate(180deg);
}
30% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(284px) rotate(216deg);
}
50% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(480px) rotate(360deg);
}
100% {
animation-timing-function: ease-in;
-webkit-transform: translate(480px, 400px) rotate(360deg);
}
}
I've created some smaller increments, to tell the engine it should animate in a certain direction; if you put 180deg half way, it seems to roll in the opposite direction.
Needs some tweaking for a smoother animation, probably.