CSS animation has weird effect on device

ionic-v1
1

I am trying out a very simple CSS animation and it works fine in Chrome browser but on device there is no animation. And it also looks different. Here’s my code. Can anyone suggest what’s wrong with it?

.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);
  }
}

Here’s the HTML

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

All it does is rotate a wedge 360 degress. But not working on android device. Thanks.
I have also tried to add .platform-android to the body tag and check it in the browser. It works as expected in the browser.