css - 改变动画的方向

Question

我使用带有此代码的 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>

Answer 1

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

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