Как исчезнуть в диалоге HTML5? ⇐ CSS

[Anonymous]

Как сделать исчезновение в диалоговом окне HTML5? Под диалогом я подразумеваю тег HTML5 (http://demo.agektmr.com/dialog/).
Я попробовал следующее (http://jsfiddle .net/v6tbW/), но по какой-то причине переход не работает.

Код: Выделить всё

document.getElementById('myDialog').show(); // note that this is a method of , this is not a jQuery method.

Код: Выделить всё

dialog {
position: absolute;
left: 0;
right: 0;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;

width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;

height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;

visibility: hidden;
opacity: 0;
transition: visibility 10s linear 10s, opacity 10s linear;
}

dialog[open] {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}

.backdrop {
position: fixed;
background: rgba(0, 0, 0, 0.1);
top: 0;
bottom: 0;
left: 0;
right: 0;
}

Код: Выделить всё

Test

Подробнее здесь: https://stackoverflow.com/questions/249 ... ml5-dialog