Animate css on page load

Question

Is it possible to action a css animation when the page loads? I'm exploring with css animations right now as I have never really worked with them.

So far I have created this: https://jsfiddle.net/7prg793g however it only works currently by hover over.

* {
  margin: 0;
  padding: 0;
}

.reveal {
  width: 380px;
  height: 660px;
  margin: 50px;
  float: left;
}

.open {
  background: url(http://uploadir.com/u/9btuxs9t) 0px 330px, url(http://uploadir.com/u/9btuxs9t) 0px -405px, #42413C;
  background-repeat: no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  -o-transition: background-position 0.3s ease;
  -ms-transition: background-position 0.3s ease;
  transition: background-position 0.3s ease;
}

.open:hover {
  background: url(http://uploadir.com/u/9btuxs9t) 0px 660px, url(http://uploadir.com/u/9btuxs9t) 0px -735px, #42413C;
  background-repeat: no-repeat;
}

.reveal p {
  font: 45px/300px Helvetica, Arial, sans-serif;
  text-align: center;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.reveal:hover p {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  cursor: pointer;
}

If this is possible, then my next question would be is it possible to delay the animation until the div is actually visible? I'm going to be using a preloader before hand.

Thank you.

Answer 1

Pure CSS solution (keyframes)

This solution is okay but it depends the compatibility that you want with browsers:

@keyframes opening {
    0% {
          background: url(http://uploadir.com/u/9btuxs9t) 0px 330px, url(http://uploadir.com/u/9btuxs9t) 0px -405px, #42413C;
    }
    100% {
       background: url(http://uploadir.com/u/9btuxs9t) 0px 660px, url(http://uploadir.com/u/9btuxs9t) 0px -735px, #42413C;
    }
}

@keyframes opening-p {
    0% {
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;    
    }
    100% {
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
    }
}

I created two keyframes to use as animation with the div and text. After I attached the animation in this way (using animation-fill-mode:forwards;)

.open {
    background: url(http://uploadir.com/u/9btuxs9t) 0px 330px, url(http://uploadir.com/u/9btuxs9t) 0px -405px, #42413C;
  background:no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  -o-transition: background-position 0.3s ease;
  -ms-transition: background-position 0.3s ease;
  transition: background-position 0.3s ease;
  animation-name: opening;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.reveal p {
  font: 45px/300px Helvetica, Arial, sans-serif;
  text-align: center;
  cursor:pointer;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;

  animation-name: opening-p;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

Here the fiddle: http://jsfiddle.net/8anvmpfv/

jQuery solution

So it's easy to do with jquery:

  $('.reveal').ready(function() {
      $('.reveal').addClass('opened revealed');
  });

It waits the div to be ready and jquery give to the div the right class that does the animation with css. Here the fiddle: https://jsfiddle.net/k6faf0fu/

Answer 2

You could do it with pure css I believe (by setting animation delays and doing some math to figure everything out), but I think your best bet would be with some javascript as well.

Here's a fiddle of a very basic (and ugly) loading animation screen.

You start the page with the body 'locked' and some sort of overlay to prevent users from interacting with the site. Then you listen for the transitionend of the various elements to know when to fire additional transitions.

You could do the same thing with css animations, just use animationend instead.