延迟过渡不透明度

Question

我想在 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>

http://jsbin.com/vejewukusi/edit?html,css,输出

这是否可以在不添加另一个 CSS 类的情况下实现？

为了让事情更清楚，我想附加一个带有类的 div，等待 3 秒，然后淡出它，并且在不使用关键帧的情况下执行此操作。

Answer 1

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

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