Question

I have a loading circle that uses CSS3 Animations. So far I have coded some jQuery that shows a div container once the loading circle animation has finished. Is it possible to code the jQuery in entirely CSS?. Any help is much appreciated.

CSS:

/*Loading Circle*/

.x {
   height: 15px; 
   width: 15px; 
   background: #dedede; 
   border-radius: 50px; 
   display: inline-block;
}


.a {animation: fade 1s forwards;}
.b {animation: fade 2s forwards;}
.c {animation: fade 3s forwards;}


@keyframes fade {
0%   {opacity:0;}
50%  {opacity:1;}
100% {opacity:0;}}





/*Empty Container*/

.container {
   display:none; 
   background: #dedede;
   height: 100px;
   width: 100px;

}

JS:

function setup() {
  var e = document.getElementById("lastDot");
    e.addEventListener("animationend", function(){$("#mydiv").show();}, false);
}

setup()

HTML:

<div class="a x"></div>
<div class="b x"></div>
<div class="c x" id="lastDot"></div>

<div class="container" id="mydiv"></div>​

​
jsFiddle

Answer 1

As long this is for aesthetics, this should be what you’re looking for:

.container {
  animation: timer 3s forwards;
}

@keyframes timer {
  0% {  opacity: 0; }
  80% {  opacity: 0; }
  100% { opacity: 1;}
}

Remeber not to use display:none with these CSS3 animations or they won’t show at all. All I’ve done is make another CSS3 animation that initially hides the element, and at 80% sets the opacity at 0 (again) so you can start the fade from 80% to 100%.

Another thing to bear in mind is your browser compatibility with this. Just add to the beginning of each animation and keyframe function (I’m taking the keyframes function as an example):

@keyframes example { }
@-moz-keyframes example { } /* Firefox */
@-webkit-keyframes example { } /* Safari and Chrome */
@-o-keyframes example { } /* Opera */