Неправильно работает animation-play-state в Safari

150
12 января 2019, 14:20

Во время разработки слайдера на css возникла следующая проблема. Неправильно выполняется свойство animation-play-state. Суть в том, что при наведении курсора на слайд, анимация должна быть приостановлена. И после того, как курсор убирается, анимация должна продолжаться с текущей позиции.

codepen: https://codepen.io/Andrey_07/pen/bxyExZ

.clients-grid__column {
    position: absolute;
    top: 0;
    left: 50%;
    /* width: 160px;*/
    width: 300px;
    min-width: 300px;
    margin-left: -160px;
    transform-origin: center;
    animation: columns-trajectory-1800 80s infinite;
    animation-timing-function: linear;
    will-change: transform;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    -ms-animation-play-state: running;
}
.clients-grid__inner.stop .clients-grid__column {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -ms-animation-play-state: paused;
}