Question

我想知道为什么我的CSS过渡效果在Firefox中看起来很棒而且非常＆＃34;跳跃＆＃34;在IE和Chrome中。我现在整天都在做这个，我不明白为什么会这样。我尝试了背面可见性，但这也不起作用。我完全坚持这个......

我拥有的是：

<div class="stickyWrap">
  <div id="header">content</div>
   <div id="nav">content</div>
</div>

CSS：

#header{
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
    backface-visibility: hidden;
    padding: 20px 0;
}
.stickyWrap.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}

.stickyWrap.sticky #header {
    padding: 5px 0;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
    backface-visibility: hidden;
}

解释的最佳方式是在FF，Chrome和/或IE中打开this test site。任何人都可以看到我做错了什么吗？它是关于stickyWrap div的吗？

Answer 1

如果您希望模拟原生应用动画的流畅度，您仍然可以欺骗浏览器启用GPU渲染。只需添加此CSS代码行

即可

.myAnimatingClass{
    transform: translate3d(0,0,0);
}

Chrome和IE中的CSS3过渡跳跃

1 个答案: