CSS Image animation works in all browsers BUT safari

I am using CSS to flip images to make them look like they flip in.

This works in all browsers but safari. Please open this link in chrome or firefox where it appears correctly, then please open it in safari:

http://ift.tt/1DG4Pz9

Here is my CSS:

KEYFRAMES

@-moz-keyframes spin { 100% {opacity:1; -moz-transform: rotateY(180deg); } }
@-webkit-keyframes spin { 100% {opacity:1;  -webkit-transform: rotateY(180deg); } }
@keyframes spin { 100% {opacity:1;  -webkit-transform: rotateY(180deg); transform:rotateY(180deg); } }

@-moz-keyframes spin2 { 100% {opacity:1; -moz-transform: rotateY(180deg); } }
@-webkit-keyframes spin2 { 100% {opacity:1; transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:100% 0 0; } }
@keyframes spin2 { 100% {opacity:1; transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:100% 0 0; } }

@-moz-keyframes spin3 { 100% { opacity:1; transform:rotateX(-180deg); -webkit-transform-origin:0 100% 0; transform-origin:0 100% 0; } }
@-webkit-keyframes spin3 { 100% { opacity:1; transform:rotateX(-180deg); -webkit-transform-origin:0 100% 0; transform-origin:0 100% 0; } }
@keyframes spin3 { 100% { opacity:1; transform:rotateX(-180deg); -webkit-transform-origin:0 100% 0; transform-origin: 0 100% 0; } }

@-moz-keyframes spin5 { 100% { opacity:1; transform:rotateX(180deg); -webkit-transform-origin: 0 0 100% 0; transform-origin:100% 0 0 } }
@-webkit-keyframes spin5 { 100% { opacity:1; transform:rotateX(180deg); -webkit-transform-origin:0 0 100% 0; transform-origin:0 0 100% 0; } }
@keyframes spin5 { 100% { opacity:1; transform:rotateX(180deg); -webkit-transform-origin: 0 0 100% 0  ; transform-origin: 0 0 100% 0; } } 

@-moz-keyframes spin4 { 100% {opacity:1; -moz-transform: rotateY(-180deg); } }
@-webkit-keyframes spin4 { 100% {opacity:1; transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:0 100% 0; } }
@keyframes spin4 { 100% {opacity:1; transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:0 100% 0; } }

Each image flip:

.front-1 {
  position: absolute;
  left: -65px;
  top: 54px;
  width: 72px;
  height: 72px;
  opacity:0;

  -webkit-animation:spin2 0.5s 0.5s linear forwards;
  -moz-animation:spin2 0.5s 0.5s linear forwards;
  animation:spin2 0.5s 0.5s linear forwards;

}


.front-2 {
  position: absolute;
  left: 7px;
  top: 54px;
  width: 72px;
  height: 72px;
  z-index:-94; 
  opacity:0;
  -webkit-animation:spin2 0.5s 1.2s linear forwards;
  -moz-animation:spin2 0.5s 1.2s linear forwards;
  animation:spin2 0.5s 1.2s linear forwards;

}

.front-3 {
  position: absolute;
  left: -65px;
  top: 374px;
  width: 72px;
  height: 72px;
  opacity:0;
  -webkit-animation:spin2 0.5s 1.5s linear forwards;
  -moz-animation:spin2 0.5s 1.5s linear forwards;
  animation:spin2 0.5s 1.5s linear forwards;
}

.front-4 {
  position: absolute;
  left: 7px;
  top: 374px;
  width: 72px;
  height: 72px;
  z-index:-95;
  opacity:0;
  -webkit-animation: spin2 0.5s 2.0s linear forwards;
  -moz-animation:spin2 0.5s 2.0s linear forwards;
  animation:spin2 0.5s 2.0s linear forwards;
}

.front-5 {
  position: absolute;
  left: 79px;
  top: 446px;
  width: 72px;
  height: 72px;
  opacity:0;

}

.front-6 {
  position: absolute;
  left: 79px;
  top: 374px;
  width: 72px;
  height: 72px;
  z-index:-96;
  opacity: 0;

  -webkit-animation:spin3 0.5s 2.5s linear forwards;
  -moz-animation:spin3 .0.5s 2.5s linear forwards;
  animation:spin3 0.5s 2.5s linear forwards;
}

.front-7 {
  position: absolute;
  left: 79px;
  top: 518px;
  width: 72px;
  height: 72px;
  z-index:-99;
  opacity:0;


  -webkit-animation:spin4 0.5s 3.5s linear forwards;
  -moz-animation:spin4 0.5s 3.5s linear forwards;
  animation:spin4 0.5s 3.5s linear forwards;
}



.front-8 {
  position: absolute;
  left: 79px;
  top: 446px;
  width: 72px;
  height: 72px;
  z-index:-98;
  opacity:0;

  -webkit-animation:spin3 0.5s 3.0s linear forwards;
  -moz-animation:spin3 0.5s 3.0s linear forwards;
  animation:spin3 0.5s 3.0s linear forwards;
}








/* BACK IMAGE CLASSES */

.back-1 {
  position: absolute;
  left: 79px;
  top: 54px;
  width: 72px;
  height: 72px;
  opacity:0;

  -webkit-animation:spin 0.5s 7s linear forwards;
  -moz-animation:spin 0.5s 7s linear forwards;
  animation:spin 0.5s 7s linear forwards;
}

.back-2 {
  position: absolute;
  left: 79px;
  top: 54px;
  width: 72px;
  height: 72px;
  opacity:0;
}

.back-3 {
  position: absolute;
  left: 79px;
  top: 374px;
  width: 72px;
  height: 72px;
  opacity:0;
  -webkit-animation:spin4 0.5s 5.5s linear forwards;
  -moz-animation:spin4 0.5s 5.5s linear forwards;
  animation:spin4 0.5s 5.5s linear forwards;
}

.back-4 {
  position: absolute;
  left: 79px;
  top: 374px;
  width: 72px;
  height: 72px;
  opacity:0;
  -webkit-animation:spin5 0.5s 6s linear forwards;
  -moz-animation:spin5 0.5s 6s linear forwards;
  animation:spin5 0.5s 6s linear forwards;
}

.back-5 {
  position: absolute;
  left: 7px;
  top: 446px;
  width: 72px;
  height: 72px;
  opacity:0;
}

.back-6 {
  position: absolute;
  left: 79px;
  top: 446px;
  width: 72px;
  height: 72px;
  opacity:0;
  -webkit-animation:spin5 0.5s 4.5s linear forwards;
  -moz-animation:spin5 0.5s 4.5s linear forwards;
  animation:spin5 0.5s 4.5s linear forwards;
}


.back-7 {
  position: absolute;
  left: 7px;
  top: 518px;
  width: 72px;
  height: 72px;
  opacity:0;
  z-index:80;

  -webkit-animation:spin 0.5s 4s linear forwards;
  -moz-animation:spin 0.5s 4s linear forwards;
  animation:spin 0.5s 4s linear forwards;
}


.back-8 {
  position: absolute;
  left: 7px;
  top: 518px;
  width: 72px;
  height: 72px;
  opacity:0;
  z-index:-81;
  -webkit-animation:spin2 0.5s 5s linear forwards;
  -moz-animation:spin2 0.5s 5s linear forwards;
  animation:spin2 0.5s 5s linear forwards;


}

Any ideas are highly appreciated.

Thanks in advance