鼠标悬停时圆形边框渐变填充动画失效，求解决

我来帮你排查下问题，你的动画没生效主要有两个核心原因，还有一个逻辑上的小误区：

1. 动画调用时缺少必要参数 #

你现在只写了 .circle:hover { animation: border; }，但浏览器需要知道动画时长和动画结束后的状态，否则它根本不知道怎么执行这个动画。至少要指定时长，比如 animation: border 1s forwards;，其中forwards是让动画结束后停在最后一帧的状态。

2. @keyframes 定义不完整且效果不符合需求 #

你当前的关键帧只有前25%有内容，后面都是空的；而且用 border 属性没法实现“逐渐填充”的效果——border 是一次性修改整个边框的样式，没法做到“慢慢填满”的视觉效果。

正确的实现方案 #

方案一：边框从无到有淡入（整体渐变） #

如果你只是想让边框慢慢显现出来，用transition就足够，比@keyframes更简洁：

.circle {
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #5d0b3c;
  /* 初始状态：透明边框 */
  border: 5px solid transparent;
  transition: border-color 0.5s ease;
}

#skills .text {
  position: absolute;
  top: 38px;
  left: 30px;
  width: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font: 18px sans-serif;
  transition: opacity .2s ease;
}

.circle:hover {
  /* 悬停时边框变成粉色 */
  border-color: pink;
}

方案二：边框逐渐“填充”（顺时针绘制一圈） #

如果是想实现从某一点开始，慢慢画完整圈边框的效果，需要用伪元素配合动画：

.circle {
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #5d0b3c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid pink;
  /* 初始状态：只显示顶部一点边框 */
  clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%);
  transition: clip-path 1s ease;
}

.circle:hover::before {
  /* 悬停时展开成完整的圆 */
  clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

#skills .text {
  position: relative;
  z-index: 1; /* 确保文字在伪元素上方 */
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font: 18px sans-serif;
  transition: opacity .2s ease;
}

对应的HTML不需要修改，悬停时边框会从顶部开始，顺时针慢慢画完整圈。

补充：用@keyframes实现逐边填充 #

如果你坚持要用@keyframes，也可以补全关键帧并指定参数，实现边框从上→右→下→左依次出现的效果：

.circle:hover {
  animation: borderFill 1s forwards;
}

@keyframes borderFill {
  0% { border: 5px solid transparent; }
  25% { border-top-color: pink; }
  50% { border-top-color: pink; border-right-color: pink; }
  75% { border-top-color: pink; border-right-color: pink; border-bottom-color: pink; }
  100% { border: 5px solid pink; }
}

内容的提问来源于stack exchange，提问作者J.G.Sable