Ionic CSS 动画在安卓设备上不起作用答案

【问题标题】：Ionic CSS animation does not working on android deviceIonic CSS 动画在安卓设备上不起作用
【发布时间】：2016-03-31 02:58:29
【问题描述】：

我正在使用 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 度。但不适用于安卓设备。谢谢。

【问题讨论】：

在android移动默认浏览器中会打开这就是为什么它无法显示过渡效果。如果它会打开chrome浏览器意味着它会显示效果..一些css效果可能因浏览器而异
请添加人行横道，它会解决您的问题
@Anilkumar ：对不起，我不明白你的回答。我粘贴的代码来自我的 ionic 测试应用程序，它在构建它时在浏览器中运行良好，但在 android 设备（作为应用程序）上根本不起作用。你能解释一下你的答案吗？
@Muhsin：谢谢。我尝试了人行横道，在项目上安装它时遇到了很多错误——所以如果我能理解问题的根源，现在就把它停了——这可能与“变换”和变换起源有关，但不确定。
在 android 移动设备中，默认浏览器不是 chrome，这就是为什么您的 css sn-p 代码在 android 移动设备中不起作用的原因

标签： android css ionic-framework ionic

【解决方案1】：

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

替换 @keyframes

@-webkit-keyframes

，动画用 -webkit-animation ，变换用 -webkit-transform 等等。

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

【讨论】：