safari中的长方体阴影动画不会褪色

Question

我让这个动画在Chrome和安卓系统中工作，而在Safari和iOS中，戒指不会褪色，而是保持黑色。是什么导致了这种情况？

有没有办法不使用长方体阴影而达到同样的效果呢？

https://codepen.io/anon/pen/oVZWQa

<div class="loader">
  <span class="ring ring-1"></span>
  <span class="ring ring-2"></span>
  <span class="ring ring-3"></span>
  <span class="ring ring-4"></span>
</div>

@yellow: #FFD200;
@brown: darken(@yellow, 45%);

body {
  background: fade(@yellow, 90%);
}

.loader {
    position: relative;
    width: 20rem;
    height: 20rem;
    .ring {
        position: absolute;
        border-radius: 50%;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        animation: pulse 8s ease-out infinite;
        &.ring-2 {
            animation-delay: 2000ms
        }
        &.ring-3 {
            animation-delay: 4000ms
        }
        &.ring-4 {
            animation-delay: 6000ms
        }
    }
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 60px @brown;
            transform: scale(0);
            opacity: 0;
        }
        25% {
            box-shadow: 0 0 0 45px rgba(darken(@yellow, 40%), 0.66);
            opacity: 1;
        }
        50% {
            box-shadow: 0 0 0 25px rgba(darken(@yellow, 30%) 0.33);
        }
        100% {
            box-shadow: 0 0 0 1px rgba(darken(@yellow, 20%) 0);
            transform: scale(1);
        }
    }
}

Answer 1

正如@Turnip指出的那样，我缺少逗号。