Why is the element blinking after adding css animation?

Question

Layout

https://jsfiddle.net/ElenaOr/nx50hw1g/300/ - I decided to draw at my leisure and practice animation at the same time.
There was a problem, after adding the "smoke" animation, the pipe began to flash. I have already tried it in different ways, if the smoke is raised much higher, then the pipe stops flashing (but then the effect that smoke comes out of the pipe disappears). Why is this happening and how to fix it?

Answer 1

I tried my best to make the example look like !

Answer 2

Set z-index to smoke-area