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);
    }
}

Incriminate

please include full code,make it atleast runable – Suppuration

don't use -webkit-transform inside @keyframes, only inside @-webkit-keyframes – Lorettalorette

What's your safari version? – Trial

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.

Rutty

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>

Karyolysis

Still not working in safari for me. I used this css code. – Incriminate

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

Waylay

Answer 4

1. Autoprefixer is a VS Code extension that ensures your css is compatible everywhere by adding extra css like -webkit-animation-name: to make your code compatible

2. (for people who use SASS) Use SASS compiler (by ritwickey) in VS Code. it automatically generates css that too ensures your css is compatible everywhere

Comply

Answer 5

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);

     }
 }

Tufthunter