css给border设置可变颜色:

@keyframes borderColorChange {
  0% {
    border-bottom-color: #d0d7de; /* 起始颜色 */
  }
  16% {
    border-bottom-color: #ff6347; /* 16%的时间点 */
  }
  33% {
    border-bottom-color: #32cd32; /* 33%的时间点 */
  }
  50% {
    border-bottom-color: #1e90ff; /* 50%的时间点 */
  }
  66% {
    border-bottom-color: #ff1493; /* 66%的时间点 */
  }
  83% {
    border-bottom-color: #ffcc00; /* 83%的时间点 */
  }
  100% {
    border-bottom-color: #8a2be2; /* 100%的时间点 */
  }
}

.bordered-element {
  padding: 20px;
  font-size: 18px;
  border-bottom: 1px solid #d0d7de; //主要是设置这个border的颜色
  animation: borderColorChange 5s infinite;
}

解释：

0%：动画开始的初始状态。在这里，边框颜色是 #d0d7de（一种淡灰色）。这意味着当动画开始时，元素的 border-bottom 会显示这个颜色。
  
16%：动画执行了 16% 的时间时，边框颜色变为 #ff6347（番茄色）。动画的进度到达 16% 时，边框颜色会从上一个颜色（#d0d7de）变到番茄色。
  
33%：动画执行了 33% 的时间时，边框颜色变为 #32cd32（黄绿色）。
  
50%：动画执行了 50% 的时间时，边框颜色变为 #1e90ff（道奇蓝）。
  
66%：动画执行了 66% 的时间时，边框颜色变为 #ff1493（深粉色）。
  
83%：动画执行了 83% 的时间时，边框颜色变为 #ffcc00（金色）。
  
100%：动画执行了 100% 的时间时，边框颜色变为 #8a2be2（蓝紫色）。这意味着在动画的结束时，边框颜色会变为这个颜色。
  
animation: borderColorChange 5s infinite
这个语句控制了动画的执行方式：
  
borderColorChange：指定应用的动画名称，对应上面定义的 @keyframes 名称。
5s：指定动画的时长是 5 秒，意思是从动画开始到结束，需要 5 秒的时间，所有的颜色变化都会在 5 秒内完成。
infinite：动画会无限次地循环播放。也就是说，动画从头到尾播放一次后，会立即重新开始。
  
总结
百分比：表示动画在指定时长（5秒）内的不同时间点，每个时间点定义了元素的样式（在这个例子中是边框的颜色）。
0% 到 100%：分别代表动画的开始和结束，通过这些时间点，你可以精确地控制元素在动画过程中如何变化。
希望这个解释能帮你更好地理解 @keyframes 中的百分比作用以及如何使用 animation 来控制动画的执行。