horizontal translate3d animation not animating

Question

what i am trying to achieve is a box which contains a div which doubles the container size and hosts two divs that would serve as slides. the button simply animate the left of the wrapper and creates a slide effect. this is the html:

<div class="generic-container">
    <div class="button">
        next
    </div>

    <div class="wrapper">
        <div class="newsbox first">

            news hey

        </div>

        <div class="newsbox second">

            news

        </div>

    </div>

    <div class="button2">
        back
    </div>
</div>

the whole thing works, but the animation effect is only visible in firefox. no webkit or chrome or ipad .. just firefox. i've been banging my head for hours now, i was wondering what i was doing wrong.

you can see the live example here (it's easier to see it then to explain): http://jsfiddle.net/omegaiori/Qys8W/

i suspect there's something wrong in the js. what do you think?

thanks a lot!

Answer 1

Add the relevant vendor prefixes for transform within the relevant keyframes according to CanIUse.com

-webkit-transform: translate3d(-50%, 0, 0);

Demo Here