动画：缩放CSS中的背景

Question

我想为背景图片设置动画（从100％缩放到120％） 从100到120的缩放工作正常。在缩放到120之后，图像自动设置为100并再次开始相同的过程。 我想放大它。 像这样：从100到120而不是从120到100.这怎么可能？

.imageBlub{
    background: url('../Images/blub.jpg');
    background-size: 100% auto;
    animation: animatedBackground 6s linear infinite;

}

@keyframes animatedBackground {
    from { background-size: 100% auto; }
    to {  background-size: 120% auto;}
}

Answer 1

我建议使用animation-direction: alternate;给出：

animation: animatedBackground 6s linear alternate infinite;

这个属性值，顾名思义，交替动画方向;首先进入'前锋'（0到100％），然后'向后'（100％到0）。

参考文献：

• animation-direction。