Replace transition with animation
CSS transitions are triggered when the property they target is changed.
It seems there is a race between laying out the image, which would
involve a style recalculation, as it's inserted into the DOM and
triggering the transition. Previously, the solution was to yield
execution via setTimeout( () => /* ... */, 100 ) so that the layout
completed and the transition could be triggered reliably.
One possible solution is to force the browser to recalculate the styles
of the element on which we want to trigger the transition. This can be
done a number of ways but getComputedStyle  is often recommended.
getComputedStyle is synchronous - no setTimeout required - but can force
a layout when there are viewport-related media queries applied .
CSS animations, however, simply start playing automatically. Moreover,
like transitions, animations are widely supported  and degrade
Credit for this solution goes to Christian Heilmann