This animation behaves as if was written:
 @keyframes change_bgcolor {
  0% { background-color: var(--bgcolor); border-width: 1px;}
  45% { background-color: green; border-width: 10px; }
  55% { background-color: blue;  border-width: 20px;}
  100% { background-color: var(--bgcolor); border-width: 1px;}
}

Change the "red" to "yellow" in the CSS code block for the div