Css 在移动设备上平滑关键帧动画？

我正在努力提高关键帧动画的平滑度。它在台式机上似乎工作得很好，但在移动设备上却非常滞后且不流畅。我需要如何更改代码以使其平滑

见JSBin：

---

有几个问题可能会导致减速。但主要的怀疑是：移除

框阴影

详细阐述

CSS可以利用硬件加速制作动画。。。但仅适用于

变换

和

不透明度

动画-所有其他动画都在CPU上运行，但优化程度较低：

你的动画改变了元素的<代码>宽度>代码>代码>高度> /Cord>属性-你可能要考虑的是改变它，使大小通过<代码>变换：缩放（x，y）< /代码>改为：

但动画中最大的消耗可能实际上是

box shadow

——你有一个

box shadow

集，在各个方向上都是

2000px

——这对智能手机来说将是一个相当大的吸引力，智能手机必须进行计算（即使它不必渲染所有图像）至少大于设备宽度和高度

4000px

的盒子<代码>框阴影可在以下位置显示：。这些有文档记录的案例是针对滚动性能的，但我可以想象，设置

框阴影的动画对性能有类似的影响

这里更好的方法是尝试使用
剪辑路径
剪辑内容，而不是用
框阴影
覆盖内容。这将像这样工作（基于您的JSBin）：


var$pages=$（“.page”）；
var$overlay=$（“#overlay”）；
$（'.a页'）。在（“单击”，函数（）上）{
if（$overlay.hasClass（“overlayAnimation”））返回；
$pages.fadeToggle（4000）；
$overlay.addClass（“overlayAnimation”）.on（“animationend”，function（））{
$（this.removeClass（“overlayAnimation”）；
});
});
*{边距：0；框大小：边框框；}
html，正文{高度：100%；}
h1{
字体：60px/2 Helvetica；
颜色：#fff；
字体大小：正常；
文本对齐：居中；
}
.第页{
位置：绝对位置；
溢出：隐藏；
宽度：90vw；
高度：90vh；
顶部：5vh；
左：5vw；
颜色：白色；
}
#第1页{
背景：#008562；
}
#第2页{
显示：无；
背景：ff8600；
}
.a页{
字体系列：Helvetica；
颜色：#fff；
边框：2倍实心#fff；
填充：10px 15px；
显示：块；
文本对齐：居中；
保证金：0自动；
宽度：20%；
文字装饰：无；
}
#覆盖层{
位置：固定；
z指数：999；
宽度：100vw；
高度：100vh；
}
#叠加{
动画：叠加动画4s向前；
}
@关键帧叠加动画{
0% {
剪辑路径：插入（0）；
背景：透明；
}
25%{
剪辑路径：插入（计算（50%-100px）计算（50%-5px））；
变换：旋转（0度）；
}
50%{
剪辑路径：插入（计算（50%-100px）计算（50%-5px））；
变换：旋转（90度）；
}
50.1%{
剪辑路径：插入（计算（50%-5px）计算（50%-100px））；
变换：旋转（0度）；
}
75%{
剪辑路径：插入（0计算（50%-100px））；
}
100%{
剪辑路径：插入（0）；
}
}

第1页
第2页
您是否尝试过添加和删除将更改以向浏览器发出动画即将发生的通知？您能给我举个例子吗？仅供参考，您可以在这里阅读更多有关
剪辑路径的内容：同样是FWIW，这在我2.5岁的低端诺基亚5安卓智能手机上运行非常顺利，因此也应该适合您！
@keyframes overlayAnimation {
  0% {
    width:  100vw;
    height: 100vh;
    transform: translate3d(0px, 0px, 0);
    background: transparent;
  }
  25%{
    width:  10px;
    height: 200px;
    transform: translate3d(calc(50vw - 5px), calc(50vh - 100px), 0);
  }
  50%{
    width:  10px;
    height: 200px;
    transform: translate3d(calc(50vw - 5px), calc(50vh - 100px), 0) rotate(90deg);
  }
  50.1%{
    width:  200px;
    height: 10px;
    transform: translate3d(calc(50vw - 100px), calc(50vh - 5px), 0) rotate(0deg);
  }
  75%{
    width:  200px;
    height: 100vh;
    transform: translate3d(calc(50vw - 100px), 0px, 0) rotate(0deg);
  }
  100%{
    width:  100vw;
    height: 100vh;
    transform: translate3d(0px, 0px, 0) rotate(0deg);
    visibility:hidden;
  }