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?

Solution 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

Solution 2

Fist of all, I've created a Fiddle to show what can be done. The red bars represent other content, like text. Say, if you want to hide it in a way that it first fades, then shrinks, you could use

@-webkit-keyframes infrontAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    height: 200px;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

@keyframes infrontAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    height: 200px;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

animation: infrontAnimation 1s 2s forwards ease-out; -webkit-animation: infrontAnimation 1s 2s forwards ease-out;

Note that both @keyframes as @-webkit-keyframesare used. If you need to hide it without shrinking animation, you might want to use this

@-webkit-keyframes infrontAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  99.9% {
    opacity: 0;
    height: 200px;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

@keyframes infrontAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  99.9% {
    opacity: 0;
    height: 200px;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

Comments

[Shannon Hochkins]

This is nice, but, I found a different solution that doesn't involve any snapping or changing of height attributes, please see my post.

[svnm]

this is the best answer to fade and or shrink with CSS Animation. Fading with CSS Transition is fine, but you will want to use this example to shrink the height.

[svnm]

your answer seems nice, but your JSFiddle is overly complicated for a simple example of adding a hidden and visible class, why is it using heaps of styling and jQuery? For this reason not many people will be able to follow your example

[Craig Brett]

This technique may come back to bite you if you're hiding something that you don't want found with ctrl+F, as the element is still on the screen, or if any of your users use assistive technology, as this isn't accessible friendly.