CSS Ключевой кадр не работает на IOS устройствах (Chrome, Safari)

Question

Я запрограммировал этот ключевой кадр здесь:

#wrapper {
  display: flex;
  justify-content: center;
}

#wrapper div {
  -webkit-animation: slideLeft 4s;
  animation: slideLeft 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes slideLeft {
    from {
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none
    }
    to {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }
}

<div id="wrapper">
  <div>Test</div>
</div>

Как вы можете видеть, это работает, но не в Safari или iPhone (Chrome, Safari Mobile). У кого-нибудь есть идеи почему? У меня нет этой проблемы на Android устройствах ...

Answer 1

//////////////// Примечание ////////// add (webkit) перед ключевыми кадрами, также доступны теперь после поправки

#wrapper {
  display: flex;
  justify-content: center;
}

#wrapper div {
  -webkit-animation: slideLeft 4s;
  animation: slideLeft 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

 @-webkit-keyframes slideLeft {
    from {
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none
    }
    to {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }
}

<div id="wrapper">
  <div>Test</div>
</div>