html - 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-keyframes block 中的某些转换中忘记了 -webkit- 前缀。

我不会详述所有内容，但您应该像这样查找部分:

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

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