div {

  --foo: green;

  border: 2px solid black;

  background: var(--foo); /* this is here to show order of sub */

  height: 100px;

  width: 100px;

  animation: test 1s infinite;

  transition: all 1s;

}

​

.hover:hover {

  --foo: blue;

  background: var(--foo);

}

​

.regular {

  --foo: red;

  animation: regular 1s infinite;

}

​

@keyframes test {

  from {

    --foo: red;

  }

  to {

    --foo: blue;

  }

}

​

/* This should transition the background from red to yellow */

@keyframes regular {

  from {

    background: var(--foo);

  }

  to {

    --foo: yellow;

    background: var(--foo);

  }

}