Smooth the cyclical replacement of one unit by another. How to do?

Hello, please push on the idea how to implement a outlined in the question. On the page there are several blocks with the same class and different content:
<div class="block">Content 1</div>
<div class="block">Content 2</div>
...
<div class="block">Content n</div>

It is necessary that the page displayed only one block each in turn, first the first 10 seconds of the second, etc. When the blocks end, the cycle returns to the first block and everything is new. Moreover, the output of each unit should be carried out smoothly, as if "manifesting".
My logic was such that the entire array of these blocks I need to run through the loop, and one block is assigned a display:block, and the rest are display:none. After 10 sec the block is assigned the second, and none the first, etc. So, please suggest how such a manipulation to do? In pure JS or jQuery - it doesn't matter. Can't figure out...
August 23rd 19 at 10:42
3 answers
August 23rd 19 at 10:44
Solution
August 23rd 19 at 10:46
You can, for example, https://jsfiddle.net/n20sbtw4/
Importantly, the height of the parent block was specified, or to blocks had absolute positioning, otherwise the content under them will be "jumping"
August 23rd 19 at 10:48
Thank you very much! it works!

Find more questions by tags CSSJavaScriptjQuery