CSS3 transition прозрачности и видимость блока

Плавное появление элементов интерфейса с помощью CSS-анимации прозрачности уже стало обычной практикой. Но такой блок даже с полной прозрачностью перекрывает всё, что окажется под ним.

Устанавливать свойство display: none нельзя потому, что тогда перестанет работать анимация . В этом случае поможет смена значения у свойства visibility. Его, на ряду с другими свойствами, указываем в transition.


.tooltip {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.widget:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

При «затухании» блока значение visibility: hidden применится с задержкой равной длительности анимации прозрачности. Без задержки блок будет скрыт мгновенно. Для фазы «появления» блока такой задержки наоборот не нужно. Блок должен получить видимость сразу и только после этого у него будет меняться прозрачность.

Обновление: В примере исправил «дрожание» блока, когда указатель движется около его нижней границы . Это приводило к тому, что указатель то уходил с блока, то вновь оказывался поверх него.

PS: Разумеется, названия CSS3 свойств transition и transition-delay нужно указывать с браузерными префиксами.