Changing CSS3 Animated Keyframes

I'm trying to change the keyframes of a CSS animation, its the scanned Y-axis direction, but Im trying to change it to the X-axis means trying to bounce left or right or right.

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

      

        
        
        
      

    

I tried this by changing translate(0, 5px);

to translateX(0, 5px);

Fiddle Problem: http://jsfiddle.net/5y8ebfcw/5/
But it doesn't work. So my question is how the animation will bounce from left to right or right to left.

Thank.