CSS animation does not work on iPhone/iOS12.2 - ios

Question

Below css animation works perfect on the old iOS versions.
However, it does not work proper on newest version, iOS12.2.
The animation starts and works when first visiting website. But after reloading browser, it does not start animation.
Any solutions?
.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

Try the following example - before make sure that you clear browser cache:
.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>