Using display with css3 animations? How to hide/unhide elements during/after animations?

Question

I have a div which I need to animate it's opacity from 1 - 0, and THEN hide it, as some of you may know, adding display properties just override transitional values and hide the element straight away, so I'm wondering if there's a way with css to animate it's opacity, and THEN hide it?

Here's what I've tried:

@keyframes infrontAnimation {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 1;
  }
  50% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  100% {
    display: none;
  }
}

This doesn't work, it just hides straight away, it also doesn't stay at the 100% value:

Using it like this:

animation: infrontAnimation 1s 2s ease-out;

So my question is, is it possible to hide something, but only after a certain animation is finished?

Answer 1

Rather than setting the height or width of an element, I found a different approach, that to me, isn't as dodgy as forcing the height at 99.9%. Here's what I came up with:

First, Rather than using display to hide & show it, I used visibility, seeing as it's still something that can interrupt our animation and ultimately cause it to fail, I setup our transition properties initially:

Note: I'll keep other prefixes out for this demo:

.item {        
    transition: visibility 0s linear 0.7s, opacity 0.7s ease-in-out;
}

So what we're doing is setting the transition of the visibility attribute to 0, but delaying it by the time it takes to complete the fade out (opacity);

So when we want it to be visible, we add the class of visilble:

.item.visible {
    transition-delay: 0s;
    visibility: visible;
    opacity: 1;
}

So we're setting our delay to 0 here so that we can override the state when it transitions in, obviously we dont' want to delay the visibility, we want to set that straight away and then animate our opacity;

Then when we want to hide it:

.item.hidden {
    opacity: 0; 
    visibility:hidden;
}

Then all this is doing is transitioning our opacity back to 0, and leaving our delay at 0.7 so that it doesn't actually 'dissappear' in the dom until the opacity has finished.

Detailed Working Example