How to smoothly show a block with "transition" after it's created?

Question

css

How to smoothly and without crutches show the block after I created it using createElement?
The whole point is that I created a block, added styles to it, including these: transition: opacity 1s; opacity: 0
After all this, I added the created element to the page and then changed the property from opacity: 0 to 1, but there is no animation. It's clear that the browser is trying to optimize the whole thing, and because. If the style changes happened on the same thread, then the styles changed before they were added to the page, but that doesn't make it any easier for me.
Is it possible to solve this disease without crutches?
I don't know most of the ins and outs of CSS, do you have any ideas?

Answer 1

<button>add</button>

document.querySelector('button').addEventListener('click', function() {
  document.body.appendChild(document.createElement('div'));
});

div {
  height: 50px;
  margin: 5px;
  background: red;
  animation: show-div 3s;
}
@keyframes show-div {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}