css - CSS 动画延迟在带有 Chrome 或 Safari 的 reactJS 中不起作用

Question

我想要按顺序显示三个图像和一些文本块，以便它们淡入但在不同时间开始淡入。

我在这里阅读了所有类似的问题，但我还没有找到解决方案。

.imgCommunity3 {
  max-width: 12.5%;
  height: auto;
  -webkit-animation-delay: 50s;
  -moz-animation-delay: 50s;
  -o-animation-delay: 50s;
  -ms-animation-delay: 50s;
  animation-delay: 50s;
  -webkit-animation: fadeIn 15s;
  -moz-animation: fadeIn 15s;
  -o-animation: fadeIn 15s;
  -ms-animation: fadeIn 15s;
  animation: fadeIn 15s;
}

我已经尝试过在淡入块之前和之后使用动画延迟，但它没有区别。所有的块同时出现——唯一的区别是它们以不同的速度淡入。

应该这么简单！

我在带有 Chrome 和 Safari 的 Mac 上运行 - 在任何一个浏览器上都是一样的。