CSS3 Animations being triggered on display change

Question

I am trying to use CSS3 animations in order to fade elements in on page load. With this I need to set the element to display: none; and then back to display: block;.

I only want the CSS3 animation to be used on the initial load of the element and not via the display. Is this possible without tracking that the animation has finished with JavaScript? I have a JS Fiddle example here https://jsfiddle.net/L219ezkd/1/

Answer 1

You can keep the markup as-is and use the visibility property instead. On the .hover-hide element, toggle between hidden and visible.

Updated fiddle.

(This works because the elements are absolutely positioned. If they were not, visibility: hidden; would not yield the desired behavior because it maintains the space used by the element and simply hides it instead of removing it altogether like display: none;.)

Answer 2

Wrap everything in a container and fade that in with css then show and hide your elements like you are doing right now:

<div class="container">
  <div id="hover-hide" class="fade fade-in" style="width: 100px; height: 100px; background:blue; display:block; position: absolute; top:0; left:0">  </div>
  <div id="hover-show" style="width: 100px; height: 100px; background:red; display:none; position: absolute; top:0; left:0"></div>
</div>

updated fiddle