CSS - 删除带有关键帧动画的框阴影

Question

我有一个最初设置了框阴影的图标。我正在为图标设置动画并对其进行缩放，但我也想在执行此操作时删除阴影。我试过这样：

.loading-icon { 
    width: 80px;
    height: 80px;
    animation-name: earth;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
}
@keyframes earth {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5) { box-shadow: none; };
    }
}

但是，这不起作用，我该怎么做？

Answer 1

在关键帧中，您在 box-shadow 周围有额外的 {}，这是不需要的。

@keyframes earth {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5);
        box-shadow: none;
    }
}