Css 延迟过渡不透明度

我想在3秒钟后淡出一个元素。我目前正在使用动画来实现这一点，但我刚刚了解到过渡延迟，因此我相信我可能能够删除动画并通过过渡来实现。这可能吗

我的原始代码是：

.foo {
    animation: fadeOut 3s cubic-bezier(0.645,  0.045, 0.355, 1.000)
}
@keyframes fadeOut {
    80%{
        opacity: 1
}
    100% {
        opacity: 0
}
}

以下是我的过渡尝试：

.announcement {
  display: block;
  font-size:22px;
  transition: opacity 0.4s cubic-bezier(0.645,  0.045, 0.355, 1.000);
  transition-delay :3s;
  opacity:0;
}

<div class="announcement">asdasd</div>

。公告{
显示：块；
字体大小：22px；
过渡：不透明度0.4s立方贝塞尔（0.645,0.045,0.355,1.000）；
过渡延迟：3s；
不透明度：0；
}
asdasd

在不添加另一个CSS类的情况下，这是可能的吗

---

为了让事情更清楚，我想用一个类附加一个div，等待3秒钟，然后淡出，不使用关键帧就可以了。

这能解决您的问题吗：？我添加了一个动画和一个小函数来设置不透明度的动画：

.test {
    animation: opacity 1s;
}
@keyframes opacity {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}

---

这能解决你的问题吗？我添加了一个动画和一个小函数来设置不透明度的动画：

.test {
    animation: opacity 1s;
}
@keyframes opacity {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}

---

要激活转换，您需要在您的案例中更改相关属性-不透明度。这意味着您必须通过指定另一个类来更改不透明度，或者通过JS直接更改它。知道我做错了什么吗？延迟不起作用。你没有触发转换。仅在渲染后添加测试类。公告-要激活转换，您需要更改相关属性-不透明度。这意味着您必须通过指定另一个类来更改不透明度，或者通过JS直接更改它。知道我做错了什么吗？延迟不起作用。你没有触发转换。仅在呈现后添加测试类。公告-