html - CSS3 动画行为异常

Question

我一直在制作球滚动并从边缘掉落的动画。首先，我制作了一个只滚动然后停止的版本。工作正常。但是，当我将下落动画添加到同一代码时，它不会滚动，我对此无能为力。这是第一个片段:

@-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 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);
}
}

(我知道它只适用于 safari 和 chrome，但我想先完成它，然后才能在每个浏览器中访问它)和 here是动画的链接。

感谢您的帮助!

编辑:似乎不太清楚我想要它做什么，所以 here您可以查看第一个代码段的作用。

Answer 1

更好的方法似乎是“链接”动画:

#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);
    }
}

干净多了!