I am using CSS to add a border animation when the user hovers on the card. On hover, the animation applies a border gradient that animates nicely. However on mouse exit, I need the animation to reverse.

I’ve seen suggestions on here but none work for my code. Here is my CSS below:

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 180deg;
}

.card-gradient {
  --angle: 180deg; /* ???? browser coverage */
  --color-bg: #101010;
  background: 
  linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
  linear-gradient(var(--angle), #333333, #333333, #333333, #333333) border-box;
  border: 1px solid transparent;
  transition: --angle 500ms ease-out;
}

/* rotate the border on hover */
.card-gradient:hover {
  --angle: 90deg;
  --color-bg: #101010;
  background: 
  linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
  linear-gradient(var(--angle), #333333, #7CD4FA, #333333, #7CD4FA) border-box;
}