Как реализовать плавное проявление картинки css?

Question

[mUchenik]

Всем привет!
Есть такая задумка:
Что бы на экране при переходе на сайт, сначала был белый экран, а потом плавно проявлялась картинка.
Ни как не получается структура html :

<div class="1">
			<div class="2"></div>

CSS:

.1 {
	position: fixed;
	left: 0;
	top: 0 ;
	width: 100%;
	height: 100%;
	background: #f6f3f3;
	z-index: 2;
	background: url(http://wp.widewallpapers.ru/2k/cities/new-york/1920x1080/New-York-1920x1080-056.jpg) center no-repeat;
		transition: 2s;
	
}

Что нужно, что бы из центра появлялась картинка средствами css?
Спасибо.

Answer 1

[0xD34F]

<div class="1">

Числа в качестве имён классов использовать не надо.

Убрать transition, добавить анимацию: animation: show 10s;.

Анимироваться будет прозрачность:

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Comments

[mUchenik]

Спасибо тебе огромное!!!

[mUchenik]

То, что нужно!