A animação CSS desaparece após o atraso

<style>
  #text{
  transition-duration:1s; /* <= creates fade out effect */
  transition-delay:1s;
}
</style>

<p onclick="this.style.opacity=0" id="text">My text</p>
PanosG