Добавить границу для анимации масштабирования кругов

Question

Я реализую анимацию волн, подобную этой:

Я хочу сделать границу размером 2 пикселя для каждого прозрачного волнового круга - что такоелучший способ добиться этого (желательно без анимации ширины / высоты)?

В настоящее время я анимирую свойство box-shadow и, кажется, я не могу (?) использовать несколько теней для имитации границы, пока янужно, чтобы они были полупрозрачными.Также я не могу использовать scale, так как border-width также будет масштабироваться.Единственный способ, который я вижу здесь, это анимировать фактические width/height каждого <i> элемента, но я не думаю, что эта анимация будет плавной на всех устройствах (?)

:root {
  --size: 6px;
  --duration: 1000ms;
}

body {
  background: #333;
}

.blinker {
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  z-index: 3;
  background: #fdfdf9;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
}

.blinker i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 1;
}

.blinker i:nth-child(1) {
  animation: blinkBoxShadow var(--duration) ease-out infinite;
  display: block;
  border: 1px solid white;
}

@keyframes blinkBoxShadow {
  from {
    box-shadow: 0 0 0 30px trasparent;
    background: transparent;
    opacity: 1;
  }
  to {
    box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
  }
}

.blinker i:nth-child(2) {
  transform: translateX(-50%) translateY(-50%);
  width: 61px;
  height: 61px;
  animation: blinkBoxShadow2 var(--duration) ease-out infinite;
  animation-delay: calc(var(--duration) - 200ms);
}

@keyframes blinkBoxShadow2 {
  from {
    box-shadow: 0 0 0 0px rgba(255, 179, 117, 0.7);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  to {
    box-shadow: 0 0 0 50px rgba(255, 179, 117, 0);
    opacity: 0;
  }
}

.blinker i:nth-child(3) {
  background: white;
}

<div class="blinker">
  <i></i>
  <i></i>
  <i></i>
</div>

Answer 1

Я думаю, что граница должна работать.Удалите тень с рамки и анимируйте ее по ширине и высоте.

См. Фрагмент ниже:

:root {
  --size: 6px;
  --duration: 1000ms;
}

body {
  background: #333;
}

.blinker {
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  z-index: 3;
  background: #fdfdf9;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
}

.blinker i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 1;
}

.blinker i:nth-child(1) {
  animation: blinkBoxShadow var(--duration) ease-out infinite;
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

@keyframes blinkBoxShadow {
  from {
    /*box-shadow: 0 0 0 30px trasparent;*/
    background: transparent;
    opacity: 1;
    width:0px;
    height:0px;
  }
  to {
    /*box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.7);*/
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    width:61px;
    height:61px;
  }
}

.blinker i:nth-child(2) {
  transform: translateX(-50%) translateY(-50%);
  width: 61px;
  height: 61px;
  animation: blinkBoxShadow2 var(--duration) ease-out infinite;
  animation-delay: calc(var(--duration) - 500ms);
}

@keyframes blinkBoxShadow2 {
  from {
    /*box-shadow: 0 0 0 0px rgba(255, 179, 117, 0.7);*/
    background:transparent;
    opacity: 0;
  border:2px solid rgba(255, 179, 117, 0);
  width: 61px;
  height: 61px;
  }
  50% {
    opacity: 0.5;
  }
  to {
    /*box-shadow: 0 0 0 50px rgba(255, 179, 117, 0);*/
    background:rgba(255, 179, 117, 0.2);
    opacity: 0;
    width:140px;
    height:140px;
  border:2px solid rgba(255, 179, 117, 0.2);
  }
}

.blinker i:nth-child(3) {
  background: white;
}

<div class="blinker">
  <i></i>
  <i></i>
  <i></i>
</div>

Answer 2

Если я правильно понимаю - Вы не можете использовать свойство box-shadow из-за его непрозрачности?

Если да, вы можете установить цвет тени с помощью функции rgba ()где последний параметр является значением альфа (прозрачности) канала.Вы можете увидеть, как это делается в проектах CodePen, когда вы печатаете в строке поиска - 'pulse'.

Если нет, если вы будете использовать JS для анимации ширины / высоты, я думаю, что это не будет проблемой эффективности набольшинство мобильных устройств.