Question

我得到了这个CSS动画，它将图像翻转到另一个非常棒的图像。但由于某些原因，它在Safari中无法工作？有人知道为什么？

查看下面的代码或这个小提琴：https://jsfiddle.net/hpnmnL11/

代码：

<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
    <div class="front">
       <img src="https://placekitten.com/600/332">
    </div>
    <div class="back">
      <img src="https://placekitten.com/600/331">
    </div>
</div>
</div>
</body>

CSS：

@-webkit-keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}

@keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}


/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}

.flip-container, .front, .back {
width: 600px;
height: 332px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}

/* flip speed goes here */
.flipper {
transition: 1s;
transform-style: preserve-3d;
position: relative;
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}

/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}

/* front pane, placed above back */
.front {
background: white;
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background: white;
}

谢谢大家！ /俄亥俄州

Answer 1

您必须在此处添加-webkit-供应商前缀：

.front, .back {
  -webkit-backface-visibility: 1000px;
}

CSS动画（翻转）在Safari中无法使用

1 个答案: