CSS не отображает ничего, а анимация непрозрачности с ключевыми кадрами не работает ⇐ Html

[Anonymous]

У меня есть очень простой фрагмент HTML с целью анимации из display: none; для отображения: block с непрозрачностью, изменяющейся от 0 до 1.

Я использую браузер Chrome, который использует префиксы -webkit в качестве предпочтения и установил переход -webkit-keyframes, чтобы сделать анимацию возможной. Однако это не работает и просто меняет отображение без исчезновения.

У меня здесь есть JSFiddle.




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



Hover on me...

Hello!