html - Safari 中的 CSS 动画

Question

我已经为 Logo 设置了动画以显示在新站点的导航中。该动画包含三个 SVG 片段，并将每个片段设置为动画。但是，在 Safari 和 iOS 设备上， Logo 缺少中心部分。

我已经为这些基本动画使用了 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/