android - Ionic CSS 动画在 Android 设备上不起作用

Question

我正在使用 Ionic Framework 尝试一个非常简单的 CSS 动画，它在 Chrome 浏览器中运行良好，但在设备上没有动画。而且形状看起来也不一样。这是我的代码。任何人都可以建议它有什么问题吗？

.container {
  text-align: center;
  padding:100px;
}
.wedge {
  animation: rotate 4s infinite linear;
  border-radius: 0 64px 64px 0;
  background: green;
  width: 32px;
  height: 64px;
  transform-origin: 0% 50%;
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

这是 HTML

<div class="container">
   <div class="wedge"></div>
</div>

它所做的只是将楔子旋转 360 度。但不适用于安卓设备。谢谢。

Answer 1

您需要定义动画以支持默认的 Android 浏览器。例如用

替换@keyframes

@-webkit-keyframes

，使用 -webkit-animation 的动画，使用 -webkit-transform 的转换等等。

它修复了我的，我希望修复了你的。