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

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

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

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

.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); }

}