iOS上的动画卡住了

Question

我正在尝试为旋转元素设置动画，这在Android上非常有用，但在iOS上它会在90度旋转时卡住。

我想用CSS做动画来保持javascript代码的清洁。此外，javascript动画可以阻止我想要运行的其他JavaScript代码。

@keyframes rotate-element {
    0%  {transform: rotate(0);}
    25% {transform: rotate(90);}
    50% {transform: rotate(180);}
    75% {transform: rotate(270);}
    100%{transform: rotate(360);}
}

#clock {
    animation-name: rotate-element;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

我的页面看起来像这样

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" actionBarHidden="true" backgroundSpanUnderStatusBar="true" id="main">
  <StackLayout>
        <Image id="clock" src="~/Images/clock.png"></Image>
  </StackLayout>
</Page>