如何获得工作关键帧 animation？

Question

我正在尝试将动画设置为涟漪效果。 它似乎在 chrome 浏览器上运行良好，但在 safari 上运行良好，而且我在同一页面中有其他动画在 chrome 和 safari 上运行良好，但不是这个。 我想知道我做错了什么。

我尝试调试它，我可以看到 Safari 图形选项卡中有一条消息说

“这个 animation 没有关键帧”

我的 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 。

没有 Safari 浏览器即使使用-webkit也支持此功能。 Safari iOS 也有同样的情况。

---

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

Answer 2

您在 sass 中写的内容。 这不是正常的 CSS 语法。 我刚刚将您的代码修改为 css。 styles 正在 safari 中得到应用。

如果您想使用 Sass，那么最好使用预编译器将您的 sass 代码编译成 css。

 .ripple-animation { background: red; }.ripple-animation::after, .ripple-animation::before { 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: 2s; -webkit-animation-delay: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.65, 0, .34, 1); animation-name: ripple; animation-duration: 2s; animation-delay: 1s; 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); } }

 <div class="ripple-animation"></div>

Answer 3

在 iOS 中，这似乎与在可访问性设置中关闭了减少运动有关。 你必须取消它，而且我认为你必须更改 safari 的版本，如果仍然不能正常工作

Answer 4

1. Autoprefixer 是一个 VS 代码扩展，通过添加额外的 css （例如-webkit-animation-name: :）来确保您的 css 在任何地方都兼容，以使您的代码兼容

2. （对于使用 SASS 的人）在 VS Code 中使用 SASS 编译器（由 ritwickey 提供）。 它会自动生成 css 这也确保您的 css 在任何地方都兼容

Answer 5

可惜我没有 Mac 来检查/调试你的代码，你可以尝试0% - 100%而不是from - to ? Safari 有时会有一些奇怪的怪癖。

例如：

 @keyframes ripple {
     0% {
         opacity: 1;
         transform: scale3d(0.8, 0.8, 0.5);
     }


     100% {
         opacity: 0;
         transform: scale3d(1.1, 1.1, 1);

     }
 }