user3476093 user3476093 - 1 month ago 10
HTML Question

CSS display none and opacity animation with keyframes not working

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.

I'm using Chrome browser, which uses the
-webkit
prefixes as preference and did a
-webkit-keyframes
transition set to make the animation possible. However, it does not work and just changes the
display
without fading.

I have a JSFiddle here.

<html>
<head>
<style type="text/css">
#myDiv
{
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #CEC;
-webkit-transition: 350ms display-none-transition;
}

#parent:hover>#myDiv
{
opacity: 1;
display: block;
}

#parent
{
background-color: #000;
color: #FFF;
width: 500px;
height: 500px;
padding: 5px;
}

@-webkit-keyframes display-none-transition
{
0% {
display: none;
opacity: 0;
}

1%
{
display: block;
opacity: 0;
}

100%
{
display: block;
opacity: 1;
}
}
</style>
<body>
<div id="parent">
Hover on me...
<div id="myDiv">
Hello!
</div>
</div>
</body>
</head>
</html>

Answer

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>

Comments