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/
You can keep the markup as-is and use the
visibility
property instead. On the.hover-hide
element, toggle betweenhidden
andvisible
.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 likedisplay: none;
.)