使用CSS缩放和输出背景图像

Question

我正在尝试使用我的背景图像进行动画，并设法做到这一点。但是我的动画无法顺利运行。如果我将动画从 30S 降低到 5S 它运行平稳，但动画太快了。

我的CSS：

body {
    height: 100%;
    width: 100%;
    background: url('https://static.pexels.com/photos/3768/sky-sunny-clouds-cloudy.jpg') center center no-repeat;
    background-size: cover;
    background-position-y: 0;
    animation: grow 30s linear infinite;
}
@keyframes grow {
    0%   { background-size: 100% auto; }
    50% { background-size: 140% auto; }
    100% { background-size: 100% auto; }
}

在此处检查结果https://jsfiddle.net/6q3obw82/

Answer 1

尝试使用添加更多断点

更改代码的密钥帧

@keyframes grow {
    0%   { background-size: 100% auto; }
    25%   { background-size: 150% auto; }
    50%   { background-size: 200% auto; }
    75% { background-size: 150% auto; }
    100% { background-size: 100% auto; }
}

jsfiddle链接：https：//jsfiddle.net/xgjmesrr/