Html 桌面safari上的css动画迭代

我正在创建一个带有无限循环的长方体的css动画，当另一个元素完成css转换时，该循环停止

使用javascript，我使用WebKittTransitionEnd检测css转换的已完成事件，然后使用jQuery删除设置框动画的css，并将其替换为迭代次数为2的新类。这部分按预期工作

出乎意料的是，在桌面safari和移动浏览器中，盒子仍然在旋转，因为它仍然处于无限循环中。而在桌面上，chrome和firefox的工作方式与预期一致

这就是我正在使用的css

@keyframes logo {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
-moz-transform: rotateX(0) rotateY(0) rotateZ(0);
-ms-transform: rotateX(0) rotateY(0) rotateZ(0);
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
}
99% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
-moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
-ms-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}

#circle {
background-color: red;
width: 10px;
height: 10px;
position: absolute;
left: 50px;
top: 50px;
border-radius: 50%;
transition-property: all;
transition-duration: 1s }


#box {
background-color: red;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
perspective-origin: 32px 32px; }

.spin {
animation-name: logo;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: initial;
-moz-animation-name: logo;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: initial;
-webkit-animation-name: logo;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: initial; }

.spin-finish {
animation-name: logo;
animation-duration: 1s;
animation-iteration-count: 2;
animation-direction: initial;
-moz-animation-name: logo;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 2;
-moz-animation-direction: initial;
-webkit-animation-name: logo;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: initial; }

.move { transform: translateX(100px); }

这是JSFIDLE

我怎样才能让它也在桌面safari上工作

---

谢谢

使用“-webkit transition”尝试创建第二个关键帧，logo2，并在“旋转完成”中更改动画名称