为什么动画在同一浏览器的不同设备上的工作方式不同？

Question

我找到了一个照片轮播模板，自己调整了一下，把网站上传到github pages，开始测试，结果发现ios和android上的动画在一个浏览器中看起来完全不同。 你可以在codepen上查看完整代码，这里粘贴太多了。 https://codepen.io/VladimirR04/pen/YzjyxyK

.carr__card {
 width: 300px;
 height: 200px;
 background-color: #442222;
 position: absolute;
 display: flex;
 justify-content: center;
 align-items: flex-end;
 top: 35px;
 left: 125px;
 font-size: 0.8rem;
 box-shadow: 0px 0px 20px rgba(0, 0, 0, .5);
 text-align: center;
 animation-name: slider;
 -webkit-animation-name: slider;
 -moz-animation-name: slider;
 animation-duration: 24s;
 -webkit-animation-duration: 24s;
 -moz-animation-duration: 24s;
 animation-iteration-count: infinite;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 animation-timing-function: linear;
 -webkit-animation-timing-function: linear;
 -moz-animation-timing-function: linear;
 }

我去突破了跨浏览器支持中的所有样式，添加了那里指示的所有前缀，但这只对iOS上的chrome有帮助，在Android上它仍然是歪的。它应该是顺畅地绕着圈子靠近和远离。在测试中的安卓系统上，只有一行照片在移动，没有“透视”，也没有缩放。

它应该是什么样子：

它在 android chrome 上的外观：