Почему не работает transition opacity?

Question

[an]

Уже не соображаю
есть

<div class="oover"></div>

и по клику к нему добавляется класс oover-z и получается

<div class="oover oover-z"></div>

задаю так

.oover{
	display:none;
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background: rgba(0, 0, 0, 0.8);
	z-index:9998;
	opacity: 0;
	transition: 1s opacity ease;	
}

.oover-z{
	display:block;
	opacity: 1;
}

и никак плавности появления не могу добиться

это потому что я к другому классу обращаюсь?

Comments

[iBird Rose]

не сработает на display:none; и display:block;
как вариант можешь заменить display на visibility: hidden; и visibility: visible;

[an]

iBird Rose, Благодарю!

Answer 1

[Lara B]

Если вы хотите плавного появления от стиля display: none , до стиля display: block, то просто при помощи опасити этого не достичь. А вот если добавите css анимацию через ключевое слово @keyframes , при которой прозрачность проявляется за полсекунды, то сработает. Я делаю именно так