Html 更改CSS3动画关键帧

我试图改变CSS动画关键帧，它是在Y轴方向上反弹，但我试图改变它到X轴意味着尝试从左到右或从右到左反弹

小提琴：

HTML:

<div class='thisone'></div>

.thisone {
-webkit-animation-name: slybounce;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-moz-animation-name: slybounce;
-moz-animation-duration: 3s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
}


@-webkit-keyframes slybounce {
  0% {
    -webkit-transform: translate(0, -5);
  }
  50% {
    -webkit-transform: translate(0, 5px);
  }
  100% {
    -webkit-transform: translate(0, -5);
  }
}

@-moz-keyframes slybounce {
  0% {
    -moz-transform: translate(0, -5);
  }
  50% {
    -moz-transform: translate(0, 5px);
  }
  100% {
    -moz-transform: translate(0, -5);
  }
}

我通过改变

translate（0，5px）尝试了这一点到
translateX（0,5px）
问题小提琴：


但它不起作用。所以我的问题是如何让动画从左到右或从右到左反弹

谢谢。
将translate（x，y）中的操作数从
translate（0，-5）
/
translate（0，+5）
反转为
translate（-5,0）
/
translate（+5,0）


或者更好的方法是使用而不是平移
难道不能使用
.animate（）
方法并通过
左边距
属性设置动画吗？也许fiddle会给你一些想法我猜你已经得到了答案：）