html - safari 中的框阴影动画不褪色

Question

我在 Chrome 和 Android 中使用此动画，而在 Safari 和 iOS 中，圆环没有消失而是保持黑色。是什么原因造成的？

有没有办法不用box-shadow也能达到同样的效果？

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 所指出的，我缺少逗号。