Как заставить форму появляться плавно?

Question

[Twelfth Doctor]

Здравствуйте! Такой вопрос: как заставить div с формой плавно появляться на странице?
Есть форма:

<div class="md-modal" id="modal-1">
			<div class="md-content">
				<h3>Редактирование сайта <?=$name?></h3>
				<div>
				<form method="post">
        <span>Имя сайта</span>
        <br><input type="text" name="name" value="yandex.ru">
        <br><span>Алиасы сайта</span>
        <br><input type="text" name="alias" value="yandex.com">
        <br><span>Кодировка сайта</span>
        <br><input type="text" name="charset" value="utf-8">
        <br><span>Email администратора сайта</span>
        <br><input type="text" name="email" value="[e-mail]">
        <br><span>Индексные файлы сайта</span>
        <br><input type="text" name="indexfiles" value="index.php">
        <br><input type="submit" name="save" value="Сохранить">
    </form>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>

её CSS код:

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    transition:5s;
    -webkit-animation: fade-in 3s linear; /* Safari 4+ */
  -moz-animation: fade-in 3s linear; /* Fx 5+ */
  -o-animation: fade-in 3s linear; /* Opera 12+ */
  animation: fade-in 3s linear; /* IE 10+, Fx 29+ */

Как сделать так, чтобы она появлялась плавно?
Код в песочнице

Answer 1

[Klein Maximus]

Вариантов реализации много.

.md-modal_visible {
  opacity: 1;
  display: block;
}
.md-modal {
  opacity: 0;
  display: none;
  transition: opacity 1s linear 0s;
}

При необходимости скрыть/показать форму, через Javascript добавляете/убираете класс md-modal_visible к блоку modal-1. Если не хочется использовать Javascript, то можно сделать через css-превдокласс :target.

Comments

[Максим Тимофеев]

только лучше так:

.md-modal {
  opacity: 0;
  transition: opacity 1s ease;
}
.md-modal.visible {
  opacity: 1;
}

и js

$('.some_btn').on('click',function(){
$('.md-modal').toggleClass('visible');
})

[Klein Maximus]

Максим Тимофеев: Можно и так. Тут дело вкуса. А можно и без jQuery на нативном JS.