Как сделать плавное появление элемента

Короткий ответ

Опишите анимацию в @keyframes и подключите её через animation:

<style>
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  .notice { padding: 12px; background: honeydew; animation: fade-in 1.5s ease-out; }
</style>
 
<div class="notice">Your order has been placed</div>

Анимация запускается один раз при появлении элемента на странице. Перезапустите пример, чтобы увидеть её ещё раз.

Появление со сдвигом

Обычно к прозрачности добавляют небольшой сдвиг снизу:

<style>
  @keyframes rise { from { opacity: 0; translate: 0 16px; } }
  .item { padding: 10px; margin-bottom: 6px; background: lavender; animation: rise 0.6s ease-out both; }
  .item:nth-child(2) { animation-delay: 0.2s; }
  .item:nth-child(3) { animation-delay: 0.4s; }
</style>
 
<div><div class="item">First</div><div class="item">Second</div><div class="item">Third</div></div>

Если указать только from, конечным состоянием станут обычные стили элемента. both держит начальный кадр во время задержки, чтобы элементы не мигали.

Элементы, которые показываются позже

Для элемента, который появляется из display: none, есть @starting-style — он задаёт стили, с которых начинается transition:

.toast { transition: opacity 0.3s; }
@starting-style { .toast { opacity: 0; } }

Частая ошибка

Элемент мигает: сначала виден, исчезает и только потом плавно появляется. Так бывает при animation-delay без animation-fill-mode: both — во время задержки элемент показывается в обычном виде. Добавьте both, как во втором примере.