Заставить анимацию вернуться к исходному значению (цвет фона)

Question

У меня есть box, который я хочу заставить мерцать.

он должен мигать бесконечно
он мигает от белого и возвращается к исходному цвету
между каждым циклом должна быть "пауза" (цвет остается прежним)
решение только css, без js

код в сниппете соответствует всем критериям. Ключевые кадры 30% и 70% предназначены для паузы между каждым циклом, где он остается полностью зеленым. Между ними он мигает белым.

Но в этом примере используются жестко заданные цвета. Возможно ли просто задать цвет для объекта (здесь body)? Затем box мигает белым и возвращается к своему исходному цвету, независимо от того, какой цвет у ящика в тот момент.
Использование "inherit" или "initial" в ключевых кадрах, к сожалению, возвращает его к белому.

body {
  animation: blink 3s infinite ease-in-out;
  background-color: green;
}

@keyframes blink {
  30% {background-color: green;}
  50% {background-color: white;}
  70% {background-color: green;}
}

_{Свободный перевод вопроса make animation return to initial value (background-color) от участника @Maze.}

Answer 1

Более простой код с использованием новой функции timing linear()

body {
  animation: blink 3s infinite linear(0, 0 30%, 1 50%, 0 70%, 0);
  background-color: green;
}

@keyframes blink {
  to {background-color: white;}
}

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

можно в селекторе выбирать цвета не напрямую в свойство, а в CSS переменные

применение же цвета к самому свойству(из переменных) можно выполнять в ключевых кадрах.

/* и да, цвет можно легко поменять в любом следующем селекторе(body:hover как пример). я на +- этом принципе в своём пет проекте langpack'и и их переключение склепал, забавы ради */

@keyframes blink {
  0% {background: var(--fill)}/* без этого кадра "сейчас", цвет фона не белел бы а отсутствовал
     что и видно при выборе черного цвета мерцания(body:hover) */
  30% {background: var(--fill)}
  50% {background: var(--blink)}
  70% {background: var(--fill)}
  100% {background: var(--fill)} /* см коммент к 0% */
}

body {
  animation: blink 3s infinite ease-in-out;
  --fill: green;
  --blink: white;
  position: absolute; inset: 0;
}

body:hover{
  --fill: pink;
  --blink: black;
}

Answer 3

Думаю, что в данном случае, переменные - это "из пушки по воробьям". Функция же linear() работает только в новейших версиях браузеров.

Вместо новшеств и усложнений можно использовать revert-layer для возврата к ранее установленному значению:

body {
  animation: blink 3s infinite ease-in-out;
  background-color: red;
}

@keyframes blink {
  30%, 70% { background-color: revert-layer; }
  50% { background-color: yellow; }
}

Цвета изменены, чтобы не путать с белым цветом по умолчанию.

Update

К сожалению, linear() не поддерживается браузерами в Win7
Этот ответ переведен и размещен на EnSo.

Answer 4

Не знаю, насколько совпадают цвета переходов с ожидаемыми, но мне кажется, способ интересный:

html, body {
  height: 100%;
  margin: 0;
}

html {
  background: red;
}

body {
  animation: blink 3s infinite ease-in-out;
  background: transparent;
}

@keyframes blink {
    0% { background-color: transparent; }
   30% { background-color: green;       }
   50% { background-color: transparent; }
   70% { background-color: green;       }
  100% { background-color: transparent; }
}

БЛОГ НА HUSL

Заставить анимацию вернуться к исходному значению (цвет фона)

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