为什么：after元素不起作用？

Question

I have a preloader on my page which should be displaying an animation. The animation should be showing on top of the dark black background before the page has loaded... but the animation is not displaying.

http://www.samnorris.net/portfolio-ss/

The animation works if I put it's CSS into #windowloader, but because I need it to be on top of a solid background (to hide unloaded content...) I thought to put it into an :after pseudo-class to load it on top of the #windowloader div... but for some reason this is not working.

is my CSS incorrect, or something else...?

Here is the Codepen which shows the animation that should be displaying: http://codepen.io/devilishalchemist/pen/emOVYQ

HTML:

<div id="windowloader">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Relevant CSS from my page:

/* ==========================================================================
  PAGE LOADER
========================================================================== */


.nonscroll {
  overflow: hidden;
}


#windowloader {
  overflow: auto;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999998;
  display: table;
  background: $black;
}

#windowloader {

  &:after {

  content: '';
  display: block;
  position: absolute;
  z-index: 999999;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
  animation: loader 1.2s infinite ease-in-out;

  span {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    background-color: #EE4040;
    animation: loaderBlock 1.2s infinite ease-in-out both;

    &:nth-child(1) {
      top: 0;
      left: 0;
    }
    &:nth-child(2) {
      top: 0;
      right: 0;
      animation: loaderBlockInverse 1.2s infinite ease-in-out both;
    }
    &:nth-child(3) {
      bottom: 0;
      left: 0;
      animation: loaderBlockInverse 1.2s infinite ease-in-out both;
    }
    &:nth-child(4) {
      bottom: 0;
      right: 0;
    }
  }

  /*LOAD FINISH*/
  .loaded {
    top: -100%;
  }

 }
}

   @keyframes loader {
      0%, 10%, 100% {
        width: 80px;
        height: 80px;
      }
      65% {
        width: 150px;
        height: 150px;
      }
    }
    @keyframes loaderBlock {
      0%, 30% {
        transform: rotate(0);
      }
      55% {
        background-color: #F37272;
      }
      100% {
        transform: rotate(90deg);

      }
    }
    @keyframes loaderBlockInverse {
      0%, 20% {
        transform: rotate(0);
      }
      55% {
        background-color: #F37272;
      }
      100% {
        transform: rotate(-90deg);
      }
    }

FWIW, I have also tried:

#windowloader:after { }

Javascript:

///////////////////////////////////////////////////////////////////////////
// Window Loader
///////////////////////////////////////////////////////////////////////////


$("#windowloader").transitioncss("transitionEndOpen","loaded",{duration:2000,delay:1000});

$("#windowloader").off("transitionEndOpen").on( "transitionEndOpen", function(){
    $("body").removeClass('nonscroll');
    $("#windowloader").remove();
    $("#portfoliogrid").isotope('layout');
    $("#isotopeMembers").isotope('layout');
    $(".isotopeBlog").isotope('layout');
});

Answer 1

Bah，没关系-我只是将动画放在#windowloader div内的单独div中，我想这可能效果很好。