更改 CSS3 个动画关键帧

Question

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

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

谢谢。

Answer 1

反转 translate(x,y) 中的操作数，从 translate(0,-5) / translate(0,+5) 到 translate(-5,0) / translate(+5,0).

Running demo

或者更好的是，使用 translateX 而不是翻译

更改 CSS3 个动画关键帧

Change CSS3 Animation keyframes

html

css

css-animations

css-transforms