执行CSS3动画(Chrome开发人员工具中的简单动画仍然不起作用)

我正在努力寻找一种使CSS页面转换在google chrome中表现良好的方法.

在时间线上的Chrome开发人员工具中,我注意到一些红色的标记,他们都说同样的事情：长帧时间表明可能导致性能下降和渲染性能差.阅读更多关于渲染性能的Web基础知识指南.

在我正在工作的应用程序上,这似乎是合法的,我试图调查,但找不到来源.

我做了一个更简单的演示,我仍然得到红色的标记：http://codepen.io/anything/full/qOOpza/

.page {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#ccc;
  &--1 {
    background:green;
  }
  &--2 {
    background: yellow;
  }
  &.movetoRight {
        animation: movetoRight ease .5s;
        animation-fill-mode: forwards;
    }

    &.movetoLeft {
        animation: movetoLeft ease .5s;
        animation-fill-mode: forwards;
    }
}


@keyframes movetoRight {
    from { }
    to { transform: translateX(100%); }
}

@keyframes movetoLeft {
    from { }
    to { transform: translateX(0); }
}

解决方法

我一直在玩ytour演示,我发现2个问题：

首先,从翻译到translate3d的改进(至少在我的系统中)有一点点表现.所以写这个

@keyframes movetoRight {
    from {     transform: translate3d(0%,0px,0px);  }
    to {     transform: translate3d(100%,0px);  }
}

更好. (这已经被告知了好几次,但总是很好的检查).

另外,一个新的财产应该有所帮助.设置

意志变化

应准备浏览器以便将来更改此属性.但是我看不出有什么区别.

其次,Chrome收集统计资料的方式似乎有问题.
您已启用“屏幕截图”.这似乎是延迟的主要原因,Chrome需要渲染和存储截图的时间.

根据定义,执行工作所需的时间不应在分析中计算.但这似乎并非如此,我会说这是一个错误.

至少在我的情况下,改变这两个问题会使红色标记几乎消失

而在其余标记的框架中,似乎没有任何性能问题.请注意,屏幕截图中帧长度为25.57 ms,但cpu时间为1.239 ms.