CSS图像动画适用于所有浏览器但也适用于Safari

Question

我正在使用CSS来翻转图像，使它们看起来像是在翻转。

这适用于所有浏览器，但Safari。请在chrome或firefox中正确显示此链接，然后在safari中打开它：

http://project-awesome.id-staging.com/SO-test/index.html

这是我的CSS：

关键帧

@-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; } }

每个图像翻转：

.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;


}

任何想法都受到高度赞赏。

提前致谢

Answer 1

您忘记了-webkit-块中某些变换中的@-webkit-keyframes前缀。

我不会重复所有内容，但你应该查找这样的部分：

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

并将-webkit-前缀添加到轮换转换中。