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

[Anonymous]

Как сделать исчезновение в диалоговом окне HTML5? Под диалогом я подразумеваю тег HTML5 (http://demo.agektmr.com/dialog/).

Я попробовал следующее (http ://jsfiddle.net/v6tbW/), но переход почему-то не работает.

HTML


Test



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



CSS

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


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