背景图像上的 CSS 滚动动画在移动设备上不起作用

Question

我制作了一个具有背景图像的页面，当用户滚动时，它应该放大并突出显示页面的不同部分。它在桌面版 Chrome 上以及当我在开发工具中进行响应式视图时效果非常好。然而，当我在手机上尝试时，它一点也不起作用。

我尝试更改背景图像的大小以及其他内容，但由于某种原因它保持在一种大小并且根本没有动画。 这是页面

body {
    min-height: 100vh;
    background: url(./sebastian-svenson-d2w-_1LJioQ-unsplash.jpg) no-repeat center center fixed;
    background-color: hsl(214, 34%, 13%);
    background-size: cover;
    animation: zoom linear;
    animation-timeline: view();
}

@keyframes zoom {
    0%,25% {
        background-size: 300%;
        background-position: center;
    }
    33% {
        background-size: 400%;
        background-position: right center;
    }
    66% {
        background-size: 400%;
        background-position: 40% center;
    }
    100% {
        background-size: 600%;
        background-position: top center;
    }
}

Answer 1

animation-timeline: view() 

是一项实验性功能，目前其支持仅限于 Chrome 桌面、Edge 桌面和 Opera 桌面浏览器。以及适用于 Android 和 Opera 移动设备的 chrome。通常对于此类问题，caniuse 是一个很好的起点。您还可以在 MDN 文档

上找到更多相关信息