Conflit entre un loader et une fenêtre modale.

Bonsoir,
J'ai un souci de conflit entre un loader et une fenêtre modale. Si je mets la transition sur les CSS du loader (et uniquement dans ce cas), je n'ai plus de modale. Je ne vois pas d'où cela peut venir.

Merci pour votre aide ^^

la modale :

.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
  overflow-y: auto;
}


.oModal:target {
  opacity:1;
  pointer-events: auto;
}

.oModal:target > div {
  margin:5% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

.oModal > div {
  max-width: 60%;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: #FF8C00;;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  overflow-y: auto;
}

.oModal > div h2 {
  margin:0;
}
@media only screen and (max-width: 768px) {
.oModal > div {
  max-width: 80%;
}
}

et le loader :

#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("imgs/LoaderCarre.gif") no-repeat center center white;
        animation: fadeout 6s;
    -moz-animation: fadeout 6s; /* Firefox */
    -webkit-animation: fadeout 6s; /* Safari et Chrome */
    -o-animation: fadeout 6s; /* Opera */
}
@keyframes fadeout {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-moz-keyframes fadeout { /* sur Firefox */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
@-webkit-keyframes fadeout { /* sur Safari et Chrome */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }frames fadeout { /* sur Opera */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}