CSS3动画在Safari浏览器中不起作用

Question

我有动画，但在野生动物园浏览器中的动画无法正常工作，如何解决此问题？以下是我的代码段：

.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可以正常运行。