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

更干净！

Answer 2

免责声明：我不是CSS3的专家，但经过一些调整后，这似乎有用......是的。

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

我已经创建了一些较小的增量，告诉引擎它应该在某个方向上制作动画;如果你把180度降到一半，它似乎向相反的方向滚动。

需要进行一些调整以获得更平滑的动画。

CSS3动画出乎意料地表现出来

2 个答案: