Block animation immediately after adding it?

Question

JavaScript

Is it possible to animate an element? Logically, the element receives dynamic styles and is immediately added to the page, where the expand and move animation should be triggered. But... this does not happen, and the block just gets the dynamic style of the final state without animation... But if you look through the chrome debugger, then everything works as it should!

.el {
    transition: transform .33s ease;
    background: red;
    width: 100px;
    height: 100px;
}

var div = document.createElement('div');
div.className = 'el';
div.style.transform = 'scale(.5) translate3d(100px, 100px, 0)'; // первоначальное состояние
document.body.appendChild(div);
div.style.transform = 'scale(1) translate3d(0px, 0px, 0)'; // конечное

Answer 1

Wrap the last line in setTimeout(..., 0)
https://jsfiddle.net/6vecsx0h/

Answer 2

I'm under the strong impression that CSS animations are a much more elegant and correct solution.