css - 更改动画的方向

我使用带有此代码的Spritesheet绘制了动画。动画是一个从左到右反弹的球，我想获得一些有关如何旋转动画以使其从上到下反弹的帮助。有任何想法吗？

<style>
    #ball{
    background: url(bilder/ball_bounce.png);
    width: 50px;
    height: 50px;

    -webkit-animation: ball-bounce 0.5s steps(6) infinite;
    animation: ball-bounce 0.7s steps(6) infinite;
    }

    @-webkit-keyframes ball-bounce {
    from{background-position: 0px;}
    to{background-position: -300px;}
    }

    @keyframes ball-bounce {
    from{background-position: 0px;}
    to{background-position: -300px;}
    }

</style>
<div id="ball"></div>

最佳答案

尝试设置background-position y轴而不是x轴：

@-webkit-keyframes ball-bounce {
    from{background-position: 0px 0px;}
    to{background-position: 0px -300px;}
}

关于css - 更改动画的方向，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29300354/

Ball

css - 更改动画的方向