Здравствуйте, подскажите пожалуйста как сделать плавное появления модального окна, и также исчезание,
Вот код моего модального окна, при открытии он появляется очень резко.
<style>
#zatemnenie {
background: rgba(102, 102, 102, 0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
#okno {
width: 450px;
height: 320px;
text-align: center;
padding: 15px;
border: 3px;
border-radius: 5px;
color: #000000;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #fff;
}
#zatemnenie:target {display: block;}
.close {
display: inline-block;
border: 1px solid #000000;
color: #000000;
padding: 0 12px;
margin: 10px;
text-decoration: none;
background: #f2f2f2;
font-size: 14pt;
cursor:pointer;
}
.close:hover {background: #e6e6ff;}
</style>
</head>
<body>
<div id="zatemnenie">
<div id="okno">
<nav><img src="fc_files/galochka.png" width="150" height "150"></nav> <br> <br>
<h4>Ваши данные были отправлены оператору, после проверки вы получите уведомление<br> <br>
<a href="#"><button class="form-btn" id="step1-btn">ОК!</button></a>
</div>
</div>
<a href="#zatemnenie"><button class="form-btn" id="step1-btn">Модальное Окно</button></a>
</div>
