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/

使用CSS放大和缩小背景图像

1 个答案: