Ripple effect not working on non-chrome browers - html

Question

I'm trying to set up a ripple effect when a button is clicked.
I have done so successfully, however it is only working in Google Chrome's browser and I'm not sure why. The effect does not show up in Safari or FireFox (have not tested IE).
Demo:
https://jsfiddle.net/uwa67xff/5/
HTML:
<p><b>NOTE:</b> This ripple effect is only working on Chrome browser.</p>
<button>Click Me</button>
CSS:
button {
border: none;
cursor: pointer;
color: black;
width: 130px;
padding: 10px;
border-radius: 2px;
font-size: 19px;
background: green;
position: relative;
overflow: hidden;
}
button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
#keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
button:focus{
outline: none;
}
* { box-sizing:border-box; }

Answer 1

In your CSS code there is some properties that have no working standard and may never become standard(transform, #keyframes). To overcome this we use Vendor Prefixes(-webkit, -moz).
To know more go here
With vendor prefixes code
* { box-sizing:border-box; }
button {
border: none;
cursor: pointer;
color: black;
width: 130px;
padding: 10px;
border-radius: 2px;
font-size: 19px;
background: green;
position: relative;
overflow: hidden;
}
button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 100%;
-webkit-transform: scale(1, 1) translate(-50%);
-moz-transform: scale(1, 1) translate(-50%);
-ms-transform: scale(1, 1) translate(-50%);
-o-transform: scale(1, 1) translate(-50%);
transform: scale(1, 1) translate(-50%);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#keyframes ripple {
0% {
-webkit-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
opacity: 1;
}
20% {
-webkit-transform: scale(25, 25);
-moz-transform: scale(25, 25);
-ms-transform: scale(25, 25);
-o-transform: scale(25, 25);
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(40, 40);
-moz-transform: scale(40, 40);
-ms-transform: scale(40, 40);
-o-transform: scale(40, 40);
transform: scale(40, 40);
}
}
button:focus:not(:active)::after {
-webkit-animation: ripple 1s ease-out;
-moz-animation: ripple 1s ease-out;
-o-animation: ripple 1s ease-out;
animation: ripple 1s ease-out;
}
button:focus{
outline: none;
}
<p><b>NOTE:</b> This ripple effect is only working on Chrome browser.</p>
<button>Click Me</button>
what prefixes are needed for a newer CSS property. go here

Answer 2

You need to add -webkit- for safari and chrome, -moz- for mozila and -o- for opera browser
button {
border: none;
cursor: pointer;
color: black;
width: 130px;
padding: 10px;
border-radius: 2px;
font-size: 19px;
background: green;
position: relative;
overflow: hidden;
}
button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
#keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
#-webkit-keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
#-moz-keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
#-o-keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
button:focus{
outline: none;
}
* { box-sizing:border-box; }
<p><b>NOTE:</b> This ripple effect is only working on Chrome browser.</p>
<button>Click Me</button>