CSS3 анимация не работает в браузере Safari

Question

У меня есть анимация, и есть проблема, что на браузере Safari анимация не работает, как решить эту проблему? Ниже мой фрагмент:

.logo, .logo::before, .logo::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.logo {
    width: 150px;
    height: 150px;
    margin-top: 20px;
    margin-left: 20px;
    background: url('/images/logo.png') no-repeat 50% / 70% rgba(0, 0, 0, .1);
    color: #f92d2d;
    box-shadow: inset 0 0 0 1px #f92d2d;
}

.logo::before, .logo::after {
    content: '';
    z-index: -1;
    margin: -5%;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
}

.logo::before {
    animation-delay: -4s;
}

@keyframes clipMe {
    0%, 100% {
        clip: rect(0px, 165px, 2px, 0px);
    }
    25% {
        clip: rect(0px, 2px, 165px, 0px);
    }
    50% {
        clip: rect(163.5px, 165px, 165px, 0px);
    }
    75% {
        clip: rect(0px, 165px, 165px, 163.5px);
    }
}

<div class="logo"></div>

В других браузерах, таких как Chrome, Firefox, Edge, работает отлично.