Safari 中的 CSS 动画

Question

我已经设置了一个动画，让一个徽标出现在新网站的导航上。动画包含三个 SVG 片段，每个片段都设置了动画。但是，在 Safari 和 iOS 设备上，徽标缺少中心部分。

我使用 Animate.css 制作这些基本动画，但不知道中间部分有什么不同。动画代码为：

@-webkit-keyframes fadeInDown {
         0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
}

100% {
opacity: 1;
-webkit-transform: none;
        transform: none;
 }
  }

@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
}

100% {
opacity: 1;
-webkit-transform: none;
        transform: none;
}
}

.fadeInDown {
-webkit-animation-name: fadeInDown;
      animation-name: fadeInDown;
}

它在 Chrome 上运行良好。示例 Animate.css 动画在 Safari 中运行良好。任何帮助将不胜感激。可以在这里看到一个活生生的例子http://codepen.io/bubblegoth/pen/MYvXBp

Answer 1

问题是动画不起作用，所以你看不到centerpart。只需将display: inline-block; 添加到.armdelay 和.centerpart 即可，一切正常。

在基于 webkit 的浏览器 (Safari) 中，-webkit-transform 被内联元素忽略。

https://www.webkit.org/blog/130/css-transforms/