我已经为 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
最佳答案
问题是动画不起作用,因此您看不到 centerpart
。只需将 display: inline-block;
添加到 .armdelay
和 .centerpart
即可,一切正常。
在基于 webkit 的浏览器 (Safari) 中,-webkit-transform
在内联元素上被忽略。
关于html - Safari 中的 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28223144/