更改CSS3动画关键帧

Question

我正在尝试更改CSS动画关键帧，它正在以Y轴方向弹跳，但我想将其更改为X轴，即从左到右或从右到左弹跳。

Fiddle: http://jsfiddle.net/5y8ebfcw/

HTML：

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

CSS:

.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);，但它没有起作用。所以我的问题是如何使动画从左到右或从右到左弹跳。 问题代码: http://jsfiddle.net/5y8ebfcw/5/
谢谢。

- Aariba

---

дЅ дёЌиѓЅдЅїз”Ё.animate()方法并通过margin-leftе±ћжЂ§иї›иЎЊеЉЁз”»еђ—пјџд№џи®ёиї™дёЄз¤єдѕ‹дјљз»™дЅ дёЂдє›жѓіжі•гЂ‚ - Abhishek Ghosh

我猜你已经得到了答案 :) - Abhishek Ghosh

Answer 1

将translate(x,y)中的操作数颠倒，从translate(0,-5)/translate(0,+5)变为translate(-5,0)/translate(+5,0)。 运行演示：链接 或者更好的方法是使用translateX代替translate。

- Andrea Ligios