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

Answer 2

如果它从左到右工作，那么只需使用旋转使其从上到下反弹：

#ball {
    /* Use rotateX to rotate around the divs anchor point (default is center center) - could also be -90deg depending on how it looks. */
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
}

这是一个基本相同的小片段，只是没有使用background-image和background-position来完成它，它显示了如何在不影响其他任何事情的情况下旋转它。

＆＃13;

body > div {
  width: 100px;
  height: 100px;
  background: whiteSmoke;
  position: relative;
  float: left;
}

@-webkit-keyframes bounce {
  0% {left: 5%;}
  50% {left: 90%;}
  100% {left: 5%;}
}
@keyframes bounce {
  0% {left: 5%;}
  50% {left: 90%;}
  100% {left: 5%;}
}

body > div > div {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  background: red;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
  -webkit-animation: bounce 2000ms ease-in-out infinite;
  animation: bounce 2000ms ease-in-out infinite;
}
body > div + div {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

＆＃13;

<div><div></div></div>

<div><div></div></div>

＆＃13;

更改动画的方向

2 个答案: