执行CSS3动画(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); }
}