CSS: define animations inline without a separate `keyframes` class

Question

Generally you would define a onHover animation of a square class like this:

.square:hover {
  animation-duration: 0.5s;
  animation-name: square_hover;
}

@keyframes square_hover {
  to {background-color: yellow;}
}

Is there a way to define it like this:

.square:hover {
  animation-duration: 0.5s;
  animation: {
    to { background-color: yellow; }
  };
}

@keyframes square_hover 

?