CSS整页动画口吃/jank

我正在开发一个单页应用程序（SPA），用户可以从一个（虚拟）页面导航到另一个页面。我想添加一个平滑过渡，当前页面向左滑动并淡出，而下一页滑到屏幕上并淡入

下面的代码片段就是其中的一个示例。在MacBook Pro上的Chrome 58（15英寸，2016年）中，性能选项卡似乎显示了各种各样的结果。有时FPS是60，有时是30，有时是10，因为每帧的毫秒数超过100（？）。在这些长帧中，我在自己的代码中看不到任何活动

这里怎么了？为什么这些动画不是丝滑的

document.body.addEventListener（'click'，function（））{
如果（窗口动画）返回；
window.animating=true；
var animator=document.getElementById（'animator'）；
var content1=document.querySelector（'.content'）；
var content2=document.createElement（'div'）；
content2.classList.add（'content'）；
content2.innerHTML=content1.innerHTML；
content2.style.transform='translateX（100%）；
content2.style.opacity=0；
animator.insertBefore（content2，content1）；
requestAnimationFrame（函数（）{
requestAnimationFrame（函数（）{
var onAnimationEnd=函数（）{
if（content1.parentNode）content1.parentNode.removeChild（content1）；
content2.style.transform=''；
animator.style.animationName=“”；
animator.removeEventListener（'animationend'，onAnimationEnd）
window.animating=false；
}
animator.style.animationName='slide'；
animator.addEventListener（'animationend'，onAnimationEnd）；
content1.style.opacity=0；
content2.style.opacity=1；
})
})
})

正文{
最大宽度：680px；
}
#动画师{
位置：相对位置；
变换：translateX（0）；
动画持续时间：1s
}
@关键帧滑动{
从{
变换：translateX（0）；
}
到{
转化：translateX（-100%）；
}
}
.内容{
位置：绝对位置；
/*所以容器可以重叠*/
宽度：计算（100%-16px）；
最大宽度：680px；
填充：0 8px；
过渡特性：不透明度；
过渡时间：1s；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。在一只猫的身上，坐着阿梅特·比本杜姆·图皮斯。在埃尼姆乌纳，尤伊斯莫·埃吉特·马莱苏亚达·维尔，利古拉的特里斯蒂克。奎斯克·福西布斯在埃格斯塔斯的监狱里放火。妊娠前庭静脉曲张。
塞德·塞勒里克·尼斯多洛，在福吉亚的泰勒斯港。他是一位伟大的诗人。Donec felis augue，dapibus ut molestie id，车辆和侵权人。临时马萨库拉比图尔酒店。Donec为您提供了便利。
维利特埃拉特的库拉比图尔。您必须遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他有关法律法规。在bibendum发酵液中的埃涅亚菌。这是一场无休止的战争。Lorem ipsum dolor sit amet，是一位杰出的献身者。悬钩子
ac nunc、nec convallis elit。事实上，这不是乌兰科帕·朗卡斯

莫里斯·迪克特（Mauris dictum enim eu Concertetur interdum）。整数是一个数字。狮子座的车辆。Praesent调味品tincidunt sollicitudin。这是一个暂时的环境，是一个充满活力的环境，是一个充满智慧的环境。
梅塞纳斯在费利斯-乌特尼斯临时住所。斜颈或舌苔。两个是临时的，一个是临时的。奎斯克·埃尼姆·拉库斯（Quisque enim lacus）、生命元素（elementum vitae lorem sed）、大权杖（Efficitiur scelerisque magna）。前庭指的是暂时性面神经。Sed欧盟
秃鹫猫咪，弗林吉利亚·内克。这是我的心愿

巨大的生命，巨大的生命。但这是一个身份或口述。塞德·奎斯·埃利芬德酒后驾车。Fusce sed purus nulla。库拉比图尔·瓦里乌斯·瓦里乌斯·瓦里乌斯·瓦里乌斯·瓦里乌斯·瓦里乌斯·瓦里乌斯·瓦里乌斯·瓦里乌斯·瓦里乌斯·瓦里乌斯·瓦里乌斯·瓦里乌斯。不必了。临时酒后驾车。梅塞纳斯
莫里斯·维塔康瓦利斯的埃利芬德。Nam lobortis sagittis augue，非porttitor ipsum tempus et Curabitur eleifend leo non tellus posuere aliquam a eu tellus。多内克·奥古斯·尼西，阿利奎特·乌特·埃格斯塔斯·奎斯，图尔皮斯的因特杜姆。莫里斯·埃尼姆大学
卡苏斯·汀西登。洛博蒂斯酒店。花椰菜团

埃蒂亚姆是一个乌拉姆科珀人。无需选择任何设备。毛里斯岛purus港，arcu等元素，弗林利亚港。他被任命为侵权者。在欧盟，毛里斯·萨吉蒂（mauris sagittis）、猫科动物门（porta felis ac）、权杖虎鲸（scelerisque orci）。这是一种侵权行为。无尾
奥迪奥

这是一个很好的例子。埃吉斯塔斯维利特酒店。Phasellus eget aliquet dolor。苏打菜悬钩子。我的爱欲和我的爱欲是不可分割的。阿库姆桑拍卖行
舌苔。欧伊斯莫德的智者之路。在bibendum sem nec viverra molestie中。维尼那提斯食盐。库拉比图尔在乌尔特里希慈姑园。Donec dapibus mauris在orci facilisis pellentesque
同侧门。纳拉·奥纳雷，奥古斯·埃吉特·康格的权杖，在威尼斯的对决，以及在奥古斯的对决。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。佩伦茨克ac森佩尔乌尔纳。Donec Consequeat ultrices quam non
佩伦茨克。Integer tellus nibh、varius eget sollicitudin nec、accumsan id massa

在调味品nulla上进行Ut。这是一个神圣的节日。在《智者日记》中，封建主义者是一个和蔼可亲的人。Fusce augue mi，maximus id ipsum vitae，临时孕妇mauris。努克·埃吉特·维利特·夸姆。这是猫咪的生命
射手座。塞德·福西布斯、迪亚姆·尤伊斯莫·康格调味品、特鲁斯·维韦拉·努克turpis tellus viverra nunc、奎斯·库鲁斯·胡斯托·菲利斯和麦格纳。这是一个很好的例子，它是一种交通工具。无酵素流苏是一种权杖

无侵权行为的侵权行为与侵权行为的共同责任。我们坐在阿梅特·帕特·马萨旁边。毛里斯·维韦拉s