我如何才能获得工作的关键帧动画？

Question

我正在尝试制作波纹效果的动画，在chrome浏览器上似乎可以正常工作，但在safari上却无法正常工作。它似乎在chrome浏览器上工作得很好，但在safari上却不行，而且我在同一个页面上还有其他动画，在chrome和safari上都工作得很好，但这个却不行。我不知道我做错了什么。

我试着调试它，我可以看到在Safari图形标签有一个消息说

"这个动画没有关键帧"

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

你用sass写的东西。这不是一个正常的CSS语法。我只是把你的代码修改为CSS。这些样式在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 2

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

Answer 3

在VS Code中使用SASS编译器(ritwickey)，它可以自动生成CSS，通过添加额外的CSS来确保你的CSS在任何地方都是兼容的，比如说。-webkit-animation-name: 以使你的代码兼容

Answer 4

可惜我没有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);

     }
 }

Answer 5

原因可能是你的 浏览器不支持 的东西，在该代码中使用。这个 "东西 "实际上是一个伪元素。::before 和 ::after 在动画和过渡中。

没有Safari浏览器支持这一点，即使有 -webkit. 同样的情况是与Safari iOS。

---

跨浏览器支持 ::before 和 ::after 具有动画和过渡效果。