Why doesn't animation work on mobile safari?

Question

css

here is the code:

.example
{
    width: 100px;
    height: 100px;
    border-radius: 50px;
    margin: 20px auto;
    background: #66127a;
    
    
    
}
.example:hover 
{
    animation-play-state: running;
    animation-duration: 3s;
    animation-name: ex;
    animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    -webkit-animation-duration: 3s;
    -webkit-animation-name: ex;
    -webkit-animation-iteration-count: infinite;
}
@keyframes ex
{
0%  {
    -webkit-transform: rotate(0deg)
}
25% {
    
background: #3f656e;
-webkit-border-radius: 25px;
}
50% {
    
background: #3f656e;
-webkit-border-radius: 25px;
}
75% {
    
background: #3f656e;
-webkit-border-radius: 25px;
}
100% {
   
    -webkit-transform: rotate(360deg)
}
}

Answer 1

@webkit-keyframes???