Плавный переход css?

Question

[Денис]

Подскажите как сделать плавный переход? Чтоб скрытый блок появлялся и исчезал плавно, добавляю transition но что то не работает...не понимаю..))
вот тут примерно набросал
или на чистом css никак?

Answer 1

[Narts]

transition для display не работает

Можно через opacity сделать:

.bg2 {
  opacity: 0;
}
.bg1:hover .bg2 {
  opacity: 1;
}

Либо так:
<div class="bg"></div>

.bg {
  margin: 50px;
  width: 200px;
  height: 200px;
  background-color: red;
  transition: all 10s ease-in;
}
.bg:hover {
  transition: all 10s ease-in;
  background-color: green;
}

Comments

[Сергей delphinpro]

transition для display не работает

Переходы работают для всех свойств.
Но нужно понимать, что некоторые свойства имеют только дискретные значения.
Переход между дискретными значениями не может быть плавным. Но он есть. Дискретный.

[Rustam Bainazarov]

Сергей delphinpro, ну, то есть, иными словами, переходы для display не работают :))

[Brad9aga]

Рустам Байназаров, LOL

[Rustam Bainazarov]

Сергей delphinpro, да ладно, им же главное понять на начальном этапе, что они могут (ре)анимировать, а что нет.

[Сергей delphinpro]

Рустам Байназаров, Думал вы не успеете ответить, уже удалил коммент =)

Похоже я не совсем прав..
Для display реально не работает.
Но вместе с тем для visibility, который тоже дискретен, работает как-то странно
https://jsfiddle.net/Lxk1shta/

[Сергей delphinpro]

надо будет освежить знания в этом вопросе =)

[Rustam Bainazarov]

Сергей delphinpro, эх, запутали :)

Я уже начал искать информацию о том, как анимируется display под капотом. Мол, оно анимируется, просто без промежуточных шагов, т. е. визуально нельзя отследить. Просто тут диссонанс в понимании, ибо тогда хотя бы работали transition-delay и transition-duration, но они тоже не работают. Там все всегда мгновенно и без задержек.

Для нормального анимирования visibility придется использовать opacity совместно с ним:


Тут хороший список всех анимируемых свойств:
https://developer.mozilla.org/en-US/docs/Web/CSS/C...

Answer 2

[Brad9aga]

думаю дальше сам