My circle animation works perfectly on Google Chrome, but when I switch to Safari the edges appear faded and blurry. I tried adding "webkit" to fix it, but had no luck. Is there a compatibility issue with Safari and CSS animations? Here is my code:
Snapshot of how it looks in chrome https://gyazo.com/91a2faecb48703c4ed7e47bc3035b802
Snapshot of how it looks in Safari https://gyazo.com/0507f9bb35eb2e0fd21b620d3ba44538
Html
<ul id="bubbles">
<li id="firstCircle"></li>
</ul>
CSS
#bubbles li{
position: relative;
list-style: none;
display: block;
border-radius: 100%;
animation: fadeAndScale 15s ease-in infinite;
-webkit-animation: fadeAndScale 15s ease-in infinite;
-ms-animation: fadeAndScale 15s ease-in infinite;
-moz-animation: fadeAndScale 15s ease-in infinite;
-o-animation: fadeAndScale 15s ease-in infinite;
}
#bubbles li:nth-child(1){
width: 100px;
height: 100px;
background-color: red;
}
@keyframes fadeAndScale{
0%{
z-index: 100;
transform: scale(0)
}
100%{
z-index: 0;
transform: scale(50);
}
}
@-webkit-keyframes fadeAndScale{
0%{
z-index: 100;
-webkit-transform: scale(0)
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}