Как реализовать такую анимацию c помощью keyframes?

Question

Подскажите, пожалуйста, как реализовать анимацию на сайте. Нужно, чтобы она выглядела вот так в качестве фона:

логика анимации простая: нужно чтобы полукруги появлялись от меньшого к большему и так бесконечно. Подскажите пожалуйста как это реализовать с помощью keyframes.

.container {
  margin: 0 auto;
  background: #FF6666;
  width: 600px;
  height: 600px;
}

header:before {
  content: "";
  position: absolute;
  width: 5em;
  height: 10em;
  border: 2px solid red;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  background: mistyrose;
}

<header>
  <div class="container">
    <p>test</p>
  </div>
</header>

Answer 1

Да тут и реализовывать-то нечего - анимируешь сдвиг фона, и все:

@keyframes foo {
  to { background-position-x: calc(-5vmax - 1.5px); }
}
/* значение сдвига подбирается по фоновому изображению, по ширине 
   повторяемого фрагмента. Здесь в градиенте, эта ширина формируется
   суммой интервала между линиями (5vmax) и толщины линии (1.5px) */


* { box-sizing: border-box; font-family: 'Open Sans', sans-serif; }
html, body { margin: 0; padding: 0; height: 100%; }

header {
  position: relative;
  margin: 0 auto; padding: 0.5rem;
  min-width: 450px;
  height: 100%; max-height: 50vw;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  top: -11vmax; right: -11vmax; bottom: -11vmax; left: -11vmax;
  background: 0 center / 150% 250% no-repeat;
  background-image: repeating-radial-gradient(100% 10% at 550% 50%, transparent -1.5px, #000 0, transparent 0, transparent 5vmax);
  transform-origin: right;
  transform: rotate(4deg);
  animation: foo 0.5s linear infinite forwards;
  will-change: background-position; /* хэллоу гугл, где мои оптимизашки? :) */
  opacity: 0.2;
  z-index: -1;
}

.click-test { position: absolute; right: 0; bottom: 3vh; left: 0; text-align: center; }
.click-test > button { padding: 0.5rem 1rem; font-weight: 300; }

<header>
  <div class="container">
    <p>test</p>
    <p class="click-test">
      <button>Просто кнопка без действий</button>
    </p>
  </div>
</header>

Естественно, работает это только с повторяемыми паттернами (по сути, анимация действует так: плавный сдвиг в сторону на "1 шаг", а затем мгновенный возврат... и этот цикл повторяется, создавая лишь иллюзию бесконечного движения).

Версия через transform - не жрущая процессорное время, но с плохим качеством линий (это косяк рендеринга вычисляемой графики, он не будет проявляться с растровыми изображениями. Визуальный ужас тут частично компенсирован удвоением градиента):

@keyframes foo {
  to { transform: rotate(4deg) translateX(calc(-5vmax - 1.5px)); }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

header {
  position: relative;
  margin: 0 auto; padding: 0.5rem;
  min-width: 450px;
  height: 100%; max-height: 50vw;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  top: -11vmax; right: -11vmax; bottom: -11vmax; left: -11vmax;
  background: 0 center / 150% 250% no-repeat;
  background-image: repeating-radial-gradient(100% 10% at 550% 50%, transparent -1.5px, #000 0, transparent 0, transparent 5vmax),
                    repeating-radial-gradient(100% 10% at 550% 50%, transparent -1.5px, #000 0, transparent 0, transparent 5vmax);
  transform-origin: right;
  transform: rotate(4deg);
  animation: foo 0.5s linear infinite forwards;
  will-change: transform;
  opacity: 0.2;
}

<header>
  <div class="container">
    <p>test</p>
  </div>
</header>

_{// Оффтоп: кстати, в фаерфоксе "рваные" линии не только во втором, но и в первом примере, всегда (тогда как в хроме они страшно рисуются только без анимации позиции фона, а с ней - рендерятся уже сглаженно). Увы, градиенты для браузеров это все еще боль... И will-change с позицией фона сейчас не имеет ожидаемого (по спецификации) эффекта, в обоих этих браузерах... хотя лисица ощутимо меньше нагружает проц при развернутом в фуллскрин первом примере, даже без помощи will-change.}

БЛОГ НА HUSL

Как реализовать такую анимацию c помощью keyframes?

Ответы (1 шт):