如何在CSS中反转动画

Question

当用户将鼠标悬停在卡片上时，我使用 CSS 添加边框动画。悬停时，动画会应用动画效果很好的边框渐变。但是，在鼠标退出时，我需要反转动画。

我在这里看到了建议，但没有一个对我的代码有用。下面是我的 CSS：

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

Answer 1

将鼠标移出后，您会立即恢复到原始状态，这可能就是您看不到转换的原因。将过渡应用于标准状态和悬停状态。还要在过渡中加入背景。这将有助于后台顺利过渡。

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

.card-gradient {
  --angle: 180deg;
  --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, background 500ms ease-out;
}

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