部分iphone, css animation rotate动画bug

Question

正常效果 晃动三下 安卓和大部分苹果手机都没问题
测试的苹果手机都也问题, 产品有一个iphone7或者8的手机, 动画一闪而过 不知是什么原因

代码逻辑是这样的
父组件请求数据渲染列表, 如果当前路由的参数中的id和列表项的id相互对应就给列表项组件传一个isSelected为true的属性
列表项(子组件)中动态className isSelected为true加上selected
动画部分代码如下

  &.selected {
    animation: tada 0.2s ease 1.5s 3;
  }
  @keyframes tada {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}