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!
Add the relevant vendor prefixes for transform within the relevant keyframes according to CanIUse.com
-webkit-transform: translate3d(-50%, 0, 0);