在 Chrome 中转换 CSS 'top'？答案

【问题标题】：Transform CSS 'top' in Chrome?在 Chrome 中转换 CSS 'top'？
【发布时间】：2015-06-25 09:16:15
【问题描述】：

我正在尝试在 CSS 中的“top”属性上运行变换动画，但它在 Chrome 中不起作用，导致过渡效果不佳，而在类似 chrome 中的平滑动画效果不佳。

以这个代码笔为例：http://codepen.io/esassaman/pen/wrsvx

    .navbar-toggle .icon-bar:nth-of-type(2) {
        top: 1px;
    }

    .navbar-toggle .icon-bar:nth-of-type(3) {
        top: 2px;
    }

    .navbar-toggle .icon-bar {
        position: relative;
        transition: all 500ms ease-in-out;
    }

    .navbar-toggle.active .icon-bar:nth-of-type(1) {
        top: 6px;
        transform: rotate(45deg);
    }

    .navbar-toggle.active .icon-bar:nth-of-type(2) {
        background-color: transparent;
    }

    .navbar-toggle.active .icon-bar:nth-of-type(3) {
        top: -6px;
        transform: rotate(-45deg);
    }

有没有办法解决这个问题？

【问题讨论】：

你看起来像这样：stackoverflow.com/a/3053846/4584849 还是像这样：stackoverflow.com/a/20529657/4584849
我对您想要实现的目标感到困惑。在 Chrome、Firefox 或 IE 中没有任何反应。您能否添加您希望发生的事情的图片？
在 CodePen 示例中，减小浏览器宽度以显示按钮（仅在此示例中是移动的）..单击切换按钮.. 在 Chrome 中，'top' CSS 属性没有动画, 所以它会跳.. 在其他浏览器中，例如 Safari，它是动画的，所以它是一个流畅的动画。

标签： css twitter-bootstrap transform

【解决方案1】：

我明白了，但在 Chrome 43.0.2357.130 m 中运行良好。这是一个流畅的动画，没有问题

【讨论】：

是的，它可以在移动设备上运行，但不能在桌面设备上运行...我想要在桌面设备上使用类似的按钮。
好的，但我的桌面（通过调整页面大小）、智能手机和笔记本电脑（也调整大小）上都有这个动画，一切都在 chrome 上运行。我可以给你截图 :) 在桌面上的 Mozilla 中也可以工作。
动画效果很好，但如果你仔细观察，你肯定会看到顶部有一个“跳跃”：6px 无法动画，所以它只是从 1px 跳到 6px，其余的动画效果很好，这绝对是 Chrome 的问题，因为 Chrome（桌面）不会为“顶部”设置动画