Надежный способ добавить новый элемент

Вы можете использовать CSS-анимации и избегать использования JavaScript, если вам нужно простое постепенное появление. Это будет работать только тогда, когда узел DOM отображается на экране. Если вам нужен более продвинутый контроль над анимацией, вы можете использовать JS.

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.dot {
   display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .7);
    margin: 0 5px 5px 0;
    animation: 1s linear fadein;
 }

Ваша первоначальная проблема имеет смысл, потому что вы добавляете скрытый класс и удаляете его внутри одной и той же функции в своем блоке setTimeout. Помните, что браузер получает возможность повторного рендеринга только после завершения выполнения вашей функции. Это означает, что в строке, где вы добавляете свой класс hidden, он вообще бесполезен, потому что он сразу же удаляется позже в функции (до того, как браузер сможет выполнить рендеринг).

Я бы рекомендовал вставить ваш элемент DOM и сбросить его с помощью setTimeout или requestAnimationFrame. Кроме того, поскольку синхронизация setInterval и setTimeout не является полностью надежной, может иметь смысл использовать событие transitionend одного элемента для запуска добавления следующего.

(function() {
  const container = document.getElementById('container');
  let count = 0;

  function addElement() {
    const div = document.createElement('div');
    div.innerHTML = 'item ' + ++count
    container.append(div);
    div.classList.add('item')
    div.addEventListener('transitionend', addElement)
    setTimeout(function() {
      div.classList.add('show')
    }, 0)
  }

  addElement()

})()

div {}

div.item {
  opacity: 0;
  transition: opacity 1s;
}

div.item.show {
  opacity: 1;
}

<hr>

<div id = "container">

</div>

Css transition лучше всего работает, когда вы что-то прячете.

Итак, вот решение, использующее только javascript.

window.setInterval(() => {
    const element = document.createElement('div');
    element.classList.add('dot');
    document.getElementById('content').appendChild(element);
    fade(element,0.1);
}, 1000);

// This will inc opacity by 0.1 each 100ms 
function fade(item, i){
i += 0.1;
item.style.opacity = i;
if (i< 1)
setTimeout(()=> fade(item,i), 100);
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .7);
    margin: 0 5px 0px 5px;
}



#content {
background:black;
}

<div id = "content"></div>