У меня эта анимация работает в Chrome и Android, а в Safari и iOS кольца не исчезают, а остаются черными. Что вызывает это?
Есть ли способ не использовать box-shadow и добиться того же эффекта?
https://codepen.io/anon/pen/oVZWQa
<div class="loader">
<span class="ring ring-1"></span>
<span class="ring ring-2"></span>
<span class="ring ring-3"></span>
<span class="ring ring-4"></span>
</div>
@yellow: #FFD200;
@brown: darken(@yellow, 45%);
body {
background: fade(@yellow, 90%);
}
.loader {
position: relative;
width: 20rem;
height: 20rem;
.ring {
position: absolute;
border-radius: 50%;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
animation: pulse 8s ease-out infinite;
&.ring-2 {
animation-delay: 2000ms
}
&.ring-3 {
animation-delay: 4000ms
}
&.ring-4 {
animation-delay: 6000ms
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 60px @brown;
transform: scale(0);
opacity: 0;
}
25% {
box-shadow: 0 0 0 45px rgba(darken(@yellow, 40%), 0.66);
opacity: 1;
}
50% {
box-shadow: 0 0 0 25px rgba(darken(@yellow, 30%) 0.33);
}
100% {
box-shadow: 0 0 0 1px rgba(darken(@yellow, 20%) 0);
transform: scale(1);
}
}
}