CSS анимация не плавная с радиально-градиентным фоном - PullRequest
Новая
       33

CSS анимация не плавная с радиально-градиентным фоном

1 голос
/ 19 апреля 2020

Я пытаюсь создать пульсирующий круговой фон с ровными краями. Для круга с гладкими краями я использую этот код CSS: 

background: radial-gradient(black, black, transparent, transparent);

Использование приведенного ниже кода хорошо работает для анимации цвета фона. Однако, как только я заменяю цвет фона на этот радиально-градиентный фон, анимация переходит и перестает быть плавной. Поведение согласованно для нескольких браузеров. Это минимальный рабочий пример проблемы, которую я имею: 

.global {
  background: lightskyblue;
}

.silver {
  // background: radial-gradient(black, black, transparent, transparent);
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0%,
  100% {
    // background-color: black;
    background: radial-gradient(black, transparent, transparent, transparent);
  }
  50% {
    // background-color: white;
    background: radial-gradient(black, black, transparent, transparent);
  }
}
<body class="global">
  <img src="pngwave.png" alt="test" class="silver" />
</body>

Я нашел этот Stackoverflow вопрос, который похож, но не помог мне решить мою проблему.

1 Ответ

1 голос
/ 19 апреля 2020

Вам необходимо анимировать background-size

.box {
  width: 200px;
  height: 200px;
  background: radial-gradient(farthest-side,black, transparent) center no-repeat;
  animation:pulse 2s linear infinite alternate;
}
@keyframes pulse{
  from {
    background-size:50% 50%;
  }
  to {
    background-size:100% 100%;
  }
}
<div class="box"></div>
...