转换CSS'；顶部'；镀铬的？

我试图在CSS中运行一个“top”属性的变换动画，但它在Chrome中不起作用，导致了一个糟糕的过渡，就像在Chrome中运行平滑动画一样

以这支笔为例：

---

有办法解决这个问题吗？

我明白了，但是在

Chrome 43.0.2357.130 m中，它工作得很好。这是一个平滑的动画，没有问题
你看起来像这样吗：还是这样：我不知道你想要实现什么。Chrome、Firefox或IE中没有发生任何事情。请添加您希望发生的事情的图像，好吗？在CodePen示例中，减小浏览器宽度，使按钮出现（在本示例中它是移动的）…单击切换按钮。。在Chrome中，“top”CSS属性没有设置动画，因此它会跳转。。在其他浏览器中，如Safari，它是动画的，所以它是一个平滑的动画。是的，它可以在移动设备上工作，但不能在桌面上工作。。。我希望在桌面上有一个类似的按钮。好的，但我的桌面上有这个动画（通过调整页面大小），我的智能手机和笔记本上有这个动画（也调整大小），所有的东西都在chrome上工作。我可以给你一个屏幕截图：）在Mozilla的桌面上也可以工作。动画可以工作，但如果你仔细观察，你肯定会看到一个“跳跃”，因为顶部：6px无法设置动画，所以它只是从1px跳到6px，其余的动画工作正常，这肯定是Chrome的问题，因为Chrome（桌面）没有设置“顶部”的动画
    .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);
    }