使用动画 CSS 属性使 div 间歇性显示不起作用

Question

我的目标是有 4 个彩色方块，其不透明度间歇性地从 0 变为 1，以显示正在加载某些内容。

我使用 css 动画属性（见下文）来实现这一点 - 但它不起作用！

CSS

 animation: opacity 1.5s infinite 200ms

我已经在codepen上实现了它。有人可以告诉我如何修复它吗？

Answer 1

这是因为您没有为“不透明度”动画分配关键帧动画。您需要创建一个关键帧动画才能使其工作：

（我将动画名称更改为“fade”而不是“opacity”）

CSS

.loader-block:nth-child(1) {
    background: red;
    animation: fade 1.5s infinite 100ms;
}
...

@-webkit-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
} 

@keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
}

代码笔

PS：您还应该用分号 ( ) 关闭所有 CSS 属性;。我注意到有几个失踪了。