How can I get working keyframe animation?

Question

I am trying to animate as ripple effect. It seems to work fine on chrome browser but not working on safari, also I have other animations in the same page that are working fine on chrome and safari both but not this one. I wonder what I am doing wrong.

I tried to debug it and I can see that there is a message in Safari Graphic Tab that says

"This animation has no keyframes"

My css code:

.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

The reason might be that your browser doesn't support something that is used in that code. That "something" is actually a pseudo element ::before and ::after in animations and transitions.

No Safari browser supports this even with -webkit. Same situation is with Safari iOS.

---

Cross browser support for ::before and ::after with animations and transitions.

Answer 2

What you have written in sass. This is not a normal CSS syntax. I just modified your code to css. The styles are getting applied in safari.

If you want to use Sass then better use a pre compiler to compile your sass code into 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

In iOS this seems to be related to having reduced motion turned off in the accessibility settings. You have to untick it and also i think you have to change the version of safari if still not works fine

Answer 4

To bad I do not have a Mac to check/debug your code, you could try 0% - 100% instead of from - to? Safari sometimes has some strange quirks.

For example:

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


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

     }
 }