CSS3 animation behaves unexpectedly

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.