ios - CSS 动画在 iPhone/iOS12.2 上不起作用

Question

下面的 css 动画在旧的 iOS 版本上完美运行。

但是，它在最新版本 iOS12.2 上无法正常工作。动画在首次访问网站时启动并运行。但是重新加载浏览器后，它没有启动动画。

有什么解决办法吗？

.button {
 display: block;
 width: 400px;
 height: 50px;
 background-color: gray;
 position: relative;
}
.button:before {
  position: absolute;
  left: -75%;
  width: 25px;
  height: 50px;
  content: '';
  display:block;
  background-color: white;

  -webkit-animation: shine 1.5s ease 0.5s infinite normal;
  animation: shine 1.5s ease 0.5s infinite normal;
}

@-webkit-keyframes shine {
  0% { left: -75%;}
  50%, 100% { left: 125%; }
}

@keyframes shine {
  0% { left: -75%; }
  50%, 100% { left: 125%; }
}

<a class="button">Hello
</a>

Answer 1

尝试以下示例 - 在确保清除浏览器缓存之前:

.button {
 display: block;
 width: 400px;
 height: 50px;
 background-color: gray;
 position: relative;
}
.button::before {
  position: absolute;
  left: 100px;
  width: 25px;
  height: 50px;
  content: '';
  display:block;
  background-color: white;

  -webkit-animation: shine 1.5s ease 0.5s infinite normal;
  animation: shine 1.5s ease 0.5s infinite normal;
}

@-webkit-keyframes shine {
  0% { left: -100px;}
  50%, 100% { left: calc(100% + 80px); }
}

@keyframes shine {
  0% { left: -100px; }
  50%, 100% { left: calc(100% + 80px); }
}

<a class="button">Hello
</a>