Here's a fiddle to play with: <https://jsfiddle.net/qgchhn99/>

I'm trying to delay an animation as well as a transition but it doesn't work for some reason. The animation and the opacity transition runs instantly instead of waiting 4 seconds.

I got a status message which appears when a form is submitted (the classes gets added dynamically):

```
<p class="success success--auto-hide">Some message</p>

```

Then I have this animation which will hide the element after 4 seconds:

```
@-webkit-keyframes cssAnimation {
  to {
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
}

@keyframes cssAnimation {
  to {
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
}

```

However, I also want the hiding to be smooth so I added a transition on `opacity` as well as the hiding animation:

```
.success {
  color: green;
  opacity: 1;
  -webkit-transition-delay: 4s;
  transition-delay:         4s;
  -webkit-transition: opacity 4s ease-in-out;
  transition:         opacity 4s ease-in-out;
}

.success--auto-hide {
  opacity: 0;
  -webkit-animation-delay: 4s;
  animation-delay:         4s;
  -webkit-animation: cssAnimation 0s ease-in 4s forwards;
  -moz-animation:    cssAnimation 0s ease-in 4s forwards;
  -o-animation:      cssAnimation 0s ease-in 4s forwards;
  animation:         cssAnimation 0s ease-in 4s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode:         forwards;
}

```

I'm sure I'm close to having it correct, so how should I modify it so that both the animation and transition waits 4 seconds before it executes?