CSS3 animation

[vuchastyi]

Всем привет, дело вот в чем: http://codepen.io/anon/pen/pJvyJG - есть css3 анимация, нужно сделать чтоб она поиграла примерно секунд 5 а потом открылся другой див или чето типо того... Чтобы сама страница открылась, а эта анимация как загрузка была, не могу придумать как бы это сделать

[vuchastyi]

$(window).load(function(){
   function show_body(){
      $("body").fadeIn(2000);
   };
   window.setTimeout( show_body, 3000 );
})

[Rome.]

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

  <script>

  $(window).load(function (){
    $('.loader').delay('1000').fadeOut('slow');
  });

  </script>
  <style>

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: hsla(10,40%,50%,1);

    background-image:
      -webkit-radial-gradient(hsla(50,80%,80%,1) 30%, transparent 35%), -webkit-radial-gradient(hsla(0,0%,0%,.1), transparent 35%);

    background-image:
      radial-gradient(
        hsla(50,80%,80%,1) 30%,
        transparent 35%
        ),
      radial-gradient(
        hsla(0,0%,0%,.1),
        transparent 35%
        );

    background-position: 50% 50%, 50% -webkit-calc(50% + .3em);

    background-position: 50% 50%, 50% calc(50% + .3em);
    background-size: 2em 2em, 3em 1em;
    background-repeat: no-repeat;

    -webkit-animation: bounce 1s infinite;

            animation: bounce 1s infinite;
    }

  @-webkit-keyframes bounce {
    0% {
      background-position: 50% -webkit-calc(50% - 4em), 50% -webkit-calc(50% + .4em);
      background-position: 50% calc(50% - 4em), 50% calc(50% + .4em);
      background-size: 2em 2em, 1em 1em;
      }
    40% {
      background-position: 50% 50%, 50% -webkit-calc(50% + .3em);
      background-position: 50% 50%, 50% calc(50% + .3em);
      background-size: 2em 2em, 3em 1em;
      }
    45% {
      background-position: 50% 50%, 50% -webkit-calc(50% + .3em);
      background-position: 50% 50%, 50% calc(50% + .3em);
      background-size: 2em 1.5em, 3em 1em;
      }
    50% {
      background-position: 50% 50%, 50% -webkit-calc(50% + .3em);
      background-position: 50% 50%, 50% calc(50% + .3em);
      background-size: 2em 1em, 3em 1em;
      }
    100% {
      background-position: 50% -webkit-calc(50% - 4em), 50% -webkit-calc(50% + .3em);
      background-position: 50% calc(50% - 4em), 50% calc(50% + .3em);
      background-size: 2em 2em, 1em 1em;
      }
    }

  @keyframes bounce {
    0% {
      background-position: 50% -webkit-calc(50% - 4em), 50% -webkit-calc(50% + .4em);
      background-position: 50% calc(50% - 4em), 50% calc(50% + .4em);
      background-size: 2em 2em, 1em 1em;
      }
    40% {
      background-position: 50% 50%, 50% -webkit-calc(50% + .3em);
      background-position: 50% 50%, 50% calc(50% + .3em);
      background-size: 2em 2em, 3em 1em;
      }
    45% {
      background-position: 50% 50%, 50% -webkit-calc(50% + .3em);
      background-position: 50% 50%, 50% calc(50% + .3em);
      background-size: 2em 1.5em, 3em 1em;
      }
    50% {
      background-position: 50% 50%, 50% -webkit-calc(50% + .3em);
      background-position: 50% 50%, 50% calc(50% + .3em);
      background-size: 2em 1em, 3em 1em;
      }
    100% {
      background-position: 50% -webkit-calc(50% - 4em), 50% -webkit-calc(50% + .3em);
      background-position: 50% calc(50% - 4em), 50% calc(50% + .3em);
      background-size: 2em 2em, 1em 1em;
      }
    }

  </style>

<div class="loader"></div>

[vuchastyi]

Rome.,
большое спасибо но я уже решил по своему)