html - 使用动画 css 属性不工作使 div 间歇性出现

Question

我的目标是拥有 4 个彩色方 block ，它们的不透明度间歇性地从 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;}
}

CodePen

PS:您还应该用分号 (;) 结束所有 CSS 属性。我注意到少了一些。