Самый простой способ анимировать появление элемента?

Question

[WebDev]

Подскажите, как правильно и максимально просто сделать появление окна?
Например есть блок .shadow, который затемняет все окно и кнопка, которая его показывает/прячет.
Если у .shadow использовать transition, то с его помощью можно анимировать opacity, но сам прозрачный элемент нужно прятать.
Т.к. display анимировать нельзя, то можно использовать left, например.

.shadow {
position: fixed;
left: -10000px;
opacity: 0;
transition: opacity 1s;
}

.vibisle {
left: 0;
opacity: 1;
}

В таком случае, при добавлении класса visible к элементу .shadow, моментально применится свойство left, а затем медленно свойство opacity. Это то, что нужно, то теперь при удалении этого класса, свойство left все также моментально применится и элемент моментально скроется.
Как без лишнего джаваскрипт кода на чистом css сделать плавное появление/изчезание элемента?

Answer 1

[boga-net]

Самый простой в таком случае будет

$(".shadow").hide(1000); // Скрыть
$(".shadow").show('slow'); // Показать

$("shadow").hide();
Показать - show()
Плавно изменит прозрачность и скроет элемент

.shadow {
   animation: animElem 1s both;
}

@keyframes animElem {
  99% {
    opacity: 0;
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%) ;
  }
}

CSS :

// 1s - время длительности анимации.
Сначала спрячет, потом уберёт подальше

Answer 2

[Александр Лысенко]

https://daneden.github.io/animate.css/