Using display with css3 animation? How to hide / show elements during / after animation?

Question

I have a div that I need to animate its opacity from 1 to 0, and THEN hide it, as some of you may know, by adding display properties, simply overriding the transition values ​​and hiding the element right away, so I wonder if there is a way css to animate its opacity, and does THEN hide it?

Here is what I 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 does not work, it just hides immediately, it also does not remain 100%:

Using it as follows:

animation: infrontAnimation 1s 2s ease-out;

So my question is: is it possible to hide something, but only after the completion of a certain animation?

Answer 1

, , , , 99,9%. :

-, , display, , visibility, , - , , , :

. :

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

, 0, , ();

, , , visilble:

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

, 0 , , , , , , ;

, :

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

0 0.7, " dissappear" dom , .

: FIDDLE DEMO

,

Answer 2

, Fiddle, , . , . , , , ,

@-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;

, @keyframes, @-webkit-keyframes. ,

@-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;
  }
}

Answer 3

You need to set animation-fill-mode:with a value forwardsso that it ends in the last frame of the animation.

See: http://dev.w3.org/csswg/css-animations/#animation-fill-mode