Reputation: 728
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
Reputation: 2305
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
(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
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
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
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
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