make animation return to initial value (background-color)

Question

I have a box that I want to blink.

• it should blink indefinitely (infinite)
• it blinks to white and returns to the initial color
• there should be a "pause" between each loop (color stays the same)
• css only, no js

This snippet fulfils all criteria. 30% and 70% keyframes are for the pause between each loop where it stays fully green. In between it blinks to white.

But this example uses hardcoded colors. Is it possible to just have the color set for the object (here body)? Then the box blinks to white und back to its original color, no matter what color the box has at the time. Using "inherit" oder "initial" in the keyframes unfortunately returns it to white.

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;}
}

Answer 1

A more simple code using the new linear() timing function

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

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