Unable to animate transform: scale and box-shadow simultaneously - html

Question

I need to animate the circle's box-shadow and scale it down to 1 from 1.6x during the same transition period of box-shadow.
The issue I'm facing is the animation of scale is happening after the animation of box-shadow is done.
body {
background-color: #333;
}
.ripple {
width: 20px;
margin: 50px auto;
height: 20px;
background: #ccc;
border-radius: 50%;
animation: rippleeff 2s ease infinite;
}
#keyframes rippleeff {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
transform: scale(1.4);
}
70% {
-moz-box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
transform: scale(1.6);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
transform: scale(1);
}
}
<div class="ripple">
</div>
Fiddle

Answer 1

When your transform: scale(1.6), your box-shadow become transparent and after that when you going to scale(1) your box-shadow is animating but you can't see it because it's transparent...so change box-shadow color
Also changed scale value in the code...
body {
background-color: #333;
}
.ripple {
width: 20px;
margin: 50px auto;
height: 20px;
background: #ccc;
border-radius: 50%;
animation: rippleeff 2s linear infinite;
}
#keyframes rippleeff {
0% {
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
transform: scale(1.6);
}
100% {
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
transform: scale(1);
}
}
<div class="ripple">
</div>