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/

Safari中的CSS动画

1 个答案: