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

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

Сообщение 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!





Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»