CSS display none and opacity animation with keyframes not working

Question

I have a very basic piece of HTML with the objective of animating from display: none; to display: block with opacity changing from 0 to 1.

Answer 1

You can not animate display property. You can try with visibility: hidden to visibility: visible

Answer 2

You can use Javascript to change both the display properties and animation. You can't put display in @keyframes.

Start with the element display:none. Then simultaneously add display:block and animation:* classes.

Here's a working example with animation in/out.

Answer 3

If you are using @keyframes you should use -webkit-animation instead of -webkit-transition. Here is the doc for @keyframes animation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations.

See code snippet below:

.parent {
  background-color: #000;
  color: #fff;
  width: 500px;
  height: 500px;
  padding: 5px;
}
.myDiv {
  display: none;
  opacity: 0;
  padding: 5px;
  color: #600;
  background-color: #cec;
}
.parent:hover .myDiv {
  display: block;
  opacity: 1;
  /* "both" tells the browser to use the above opacity
  at the end of the animation (best practice) */
  -webkit-animation: display-none-transition 1s both;
  animation: display-none-transition 1s both;
}
@-webkit-keyframes display-none-transition {
  0% {
    opacity: 0;
  }
}
@keyframes display-none-transition {
  0% {
    opacity: 0;
  }
}

<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>

---

2016 UPDATED ANSWER

To reflect today's best practices, I would use a transition instead of an animation. Here is the updated code:

.parent {
  background-color: #000;
  color: #fff;
  width: 500px;
  height: 500px;
  padding: 5px;
}
.myDiv {
  opacity: 0;
  padding: 5px;
  color: #600;
  background-color: #cec;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
.parent:hover .myDiv {
  opacity: 1;
}

<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>

Answer 4

add this css ;

.fade:not(.show) {
    opacity: 1;
}

this work for me..

Answer 5

The display doesn't work with CSS transition or animation.

Use opacity, visibility or z-index. You can combine all them.

Try to use visibility: visible in place display: block and visibility: hidden in place display: none.

And finally, combine z-index: -1 and z-index: 100 for example.

Good work ;)

Answer 6

How about this example: jsfiddle The issue was needing to use an animation rather than transition with keyframes

@-webkit-keyframes fadeAnimation {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
#myDiv {
    opacity: 0;
    padding: 5px;
    color: #600;
    background-color: #CEC;
}
#parent {
    background-color: #000;
    color: #FFF;
    width: 500px;
    height: 500px;
    padding: 5px;
}
#parent:hover #myDiv {
    -webkit-animation: fadeAnimation 6s;
}