Непрозрачность перехода с задержкой ⇐ CSS

[Anonymous]

Я хочу затемнить элемент через 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;
}

asdasd

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

Возможно ли это без добавления еще одного класса CSS?

Просто чтобы прояснить ситуацию, я хочу добавить div с классом, подождать 3 секунды, а затем затемнить его и сделать это без использования ключевых кадров.

Подробнее здесь: https://stackoverflow.com/questions/320 ... with-delay