CODEWITHSUNDEEP
htmlcsssafaricss-animationskeyframe
Salman Ullah Khan
Salman Ullah Khan

Reputation: 728

How can I get working keyframe animation?

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

Upvotes: 9

Views: 977

Answers (5)

ashuvssut
ashuvssut

Reputation: 2305

  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

Upvotes: 1

David Boroš
David Boroš

Reputation: 665

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.

Upvotes: 2

Dave
Dave

Reputation: 356

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

     }
 }

Upvotes: 1

Karan Goyal
Karan Goyal

Reputation: 457

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

Upvotes: 1

Vikrant Shete
Vikrant Shete

Reputation: 21

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>

Upvotes: 1

Related Questions