CSS бесконечная волновая анимация - PullRequest
Новая
       10

CSS бесконечная волновая анимация

0 голосов
/ 28 февраля 2019

Я хочу сделать бесконечную анимацию пульсации, но она станет неестественной ..

ripple

Мне не нравится это внезапное изменение, я хочучтобы анимация продолжалась вечно.Как мне это сделать?

В фрагменте кода я по какой-то причине не смог отобразить его, поэтому текущая ситуация в JSFiddle .

body {font-size: 62.5%; background-color: #000;}

.ripple {
  margin: auto;
  margin-top: 10rem;
  background-color: #fff;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  animation: ripple 2s linear infinite;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .7rem rgba(255,255,255, 0.2),
                0 0 0 1.5rem rgba(255,255,255, 0.2),
                0 0 0 5rem rgba(255,255,255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 1.5rem rgba(255,255,255, 0.2),
                0 0 0 4rem rgba(255,255,255, 0.2),
                0 0 0 8rem rgba(255,255,255, 0);
  }
}
<div class="ripple" style="animation-delay: 0s"></div>

Кстати, я пытался также (▼) с HTML, но круги перекрывались, и я не мог сделать это хорошо .. :( 

<div class="ripple" style="animation-delay: 0s"></div>
<div class="ripple" style="animation-delay: 1s"></div>
<div class="ripple" style="animation-delay: 2s"></div>

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

Вот еще одна более простая идея для получения плавного эффекта.Вы можете сохранить теневую анимацию простой и считать, что псевдоэлемент имеет такую ​​же задержанную анимацию.Хитрость заключается в том, чтобы правильно выбрать задержку / длительность.

Я сделал длительность равной 3s (3 элемента), и между каждым из них 1s задержка. 

body {background-color: #000;}

.ripple {
  margin: auto;
  margin-top: 5rem;
  background-color: #fff;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  position:relative;
  animation: ripple 3s linear infinite;
}
.ripple::before,
.ripple::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 50%;
  animation: ripple 3s linear infinite 1s;
}
.ripple::after {
  animation: ripple 3s linear infinite 2s;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .7rem rgba(255,255,255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 8rem rgba(255,255,255, 0);
  }
}
<div class="ripple"></div>
0 голосов
/ 28 февраля 2019

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

Примерно так: 

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0rem rgba($ripple-color, 0.2),
                0 0 0 1rem rgba($ripple-color, 0.2),
                0 0 0 2rem rgba($ripple-color, 0.2),
                0 0 0 5rem rgba($ripple-color, 0.2);
  }
  100% {
    box-shadow: 0 0 0 1rem rgba($ripple-color, 0.2),
                0 0 0 2rem rgba($ripple-color, 0.2),
                0 0 0 5rem rgba($ripple-color, 0.2),
                0 0 0 8rem rgba($ripple-color, 0);
  }
}
...