At first, I would use animations to achieve a smooth recording, and not just for switch elements for visible ones.
Secondly, I would not write the elements manually, but what if you have 20 of them? What about 1000?
Start with such a frame, and then customize to your case:
HTML
<div id="elementsInThis"> <div class="K">ELEMENT 1</div> <div class="K">ELEMENT 2</div> <div class="K">ELEMENT 3</div> <div class="K">ELEMENT 4</div> <div class="K">ELEMENT 5</div> <div class="K">ELEMENT 6</div> <div class="K">ELEMENT 7</div> <div class="K">ELEMENT 8</div> <div class="K">ELEMENT 9</div> </div>
Js
var delay = 0; function animate(element, delay){ window.setTimeout(function(){ element.style.display = 'block'; }, delay*1000) } var elements = document.getElementById("elementsInThis").childNodes; var onlydivs = Object.keys(elements).forEach(function(index, element){ if (elements[element].nodeType !== Node.TEXT_NODE) animate(elements[element], delay++); });
CSS
.K{ display: none; background: red; border: solid 2px black; animation-name: appear; animation-duration: 4s; animation-fill-mode: forwards; } @keyframes appear{from{left:-300px;opacity:0} to{left:0;opacity:1}}
Here you can see it in action:
js violin
Change the animation and delay to your liking, as well as attach to your own parent and make the best children selector if you have more complex ones. This is just a demo, but the principle is the same that you do the following:
You want to use CSS to create a suitable (or find someone else's) animation and set the default display for the none element (perhaps instead of breaking your HTML code, you can use visibility)
make a delay function with a fixed delay step (I used a 1 * 1000 ms step)
use childNodes forEach() and Object.keys() to avoid binding your CSS class with animation to elements
you can leave the style in another CSS class if you like