水平 translate3d 动画没有动画答案

【问题标题】：horizontal translate3d animation not animating水平 translate3d 动画没有动画
【发布时间】：2013-10-24 14:18:48
【问题描述】：

我想要实现的是一个包含一个 div 的框，该 div 将容器大小加倍并托管两个可用作幻灯片的 div。该按钮只是为包装器的左侧设置动画并创建幻灯片效果。这是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>

整个事情都有效，但动画效果仅在Firefox中可见。没有 webkit 或 chrome 或 ipad .. 只是 firefox。我已经敲了几个小时的头，我想知道我做错了什么。

您可以在此处查看实时示例（查看后更容易解释）： http://jsfiddle.net/omegaiori/Qys8W/

我怀疑 js 有问题。你觉得呢？

非常感谢！

【问题讨论】：

标签： jquery css css-animations translate3d

【解决方案1】：

根据CanIUse.com在相关关键帧中添加transform的相关供应商前缀

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

Demo Here

【讨论】：

我确定供应商在那里...... -_- 我正在使用指南针，我完全忘记了@include transform();啊！非常感谢