html - 如何获得关键帧动画？

Question

我正在尝试制作涟漪效果的动画。在chrome浏览器上似乎可以正常工作，但不能在safari上工作，而且我在同一页面上还有其他动画在chrome和safari上都可以正常工作，但不是这个动画。我想知道我做错了什么。

我尝试对其进行调试，然后可以看到Safari Graphic Tab中显示一条消息，内容为

"This animation has no keyframes"

我的CSS代码:

.ripple-animation {
    &::after {
        @include rings(2s, 40s);
    }
    &::before {
        @include rings(2s, 40s);
    }
}

@mixin rings($duration, $delay) {
    opacity: 0.5;
    // display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -8px;
    left: -10px;
    right: 0;
    bottom: 0;
    content: '';
    height: 120%;
    width: 110%;
    border: 4px solid rgba(0, 0, 0, 0.4);
    border-radius: 100%;

    -webkit-animation-name: ripple;
    -webkit-animation-duration: $duration;
    -webkit-animation-delay: $delay;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.65, 0, .34, 1);

    animation-name: ripple;
    animation-duration: $duration;
    animation-delay: $delay;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65, 0, .34, 1);

}

@-webkit-keyframes ripple {
    from {
        opacity: 1;
        -webkit-transform: scale3d(0.8, 0.8, 0.5);
        transform: scale3d(0.8, 0.8, 0.5);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }

}

@keyframes ripple {
    from {
        opacity: 1;
        -webkit-transform: scale3d(0.8, 0.8, 0.5);
        transform: scale3d(0.8, 0.8, 0.5);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
}

Answer 1

原因可能是您的浏览器不支持该代码中使用的。在动画和过渡中，“某物”实际上是伪元素::before和::after。

即使使用-webkit，也没有Safari浏览器支持此功能。 Safari iOS也是如此。

跨浏览器对 ::before 和 ::after 的动画和过渡支持。