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

我正在试用一个非常简单的CSS动画，使用Ionic框架，它在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度。但不在安卓设备上工作。谢谢。

您需要定义动画以支持默认Android浏览器。例如，将@keyframes替换为

@-webkit关键帧

，使用-webkit动画制作动画，使用-webkit变换制作变换，等等

---

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

在android手机中，默认浏览器将打开，这就是为什么它无法显示过渡效果。如果它打开chrome浏览器，意味着它将显示效果。某些css效果可能因浏览器而异。请添加人行横道，它将解决您的问题problem@Anilkumar：对不起，我不明白你的答案。我粘贴的代码来自我的ionic测试应用程序，它在构建时在浏览器中运行良好，但在android设备（作为应用程序）上根本不起作用。你能解释一下你的答案吗？@muxin:谢谢。我尝试了人行横道，在项目中安装时出现了很多错误-因此，如果我能理解问题的根源，就暂时搁置它-这可能与“transform”和transform origin有关，但不确定。在android移动设备中，默认浏览器不是chrome，这就是为什么你的css代码片段在android移动设备中不起作用