如何实现边框从起点到终点逐步显示的单次动画效果？

实现方案 #

你可以通过CSS线性渐变模拟四条边框，配合关键帧动画实现逐边显示的效果，完全匹配你的需求：仅逐步显示不擦除、纯色样式、仅单次执行。

实现代码 #

给需要添加动画的边框容器追加如下CSS样式即可：

/* 边框动画类 */
.border-animate {
  background: 
    linear-gradient(lime, lime) 0 0 / 0 3px no-repeat, /* 上边框 */
    linear-gradient(lime, lime) 100% 0 / 3px 0 no-repeat, /* 右边框 */
    linear-gradient(lime, lime) 100% 100% / 0 3px no-repeat, /* 下边框 */
    linear-gradient(lime, lime) 0 100% / 3px 0 no-repeat; /* 左边框 */
  animation: borderDraw 1.5s linear forwards 0.8s;
  /* 0.8s为延迟时间，可调整为和AOS缩放动画触发时机对齐 */
}

@keyframes borderDraw {
  25% {
    background-size: 100% 3px, 3px 0, 0 3px, 3px 0;
  }
  50% {
    background-size: 100% 3px, 3px 100%, 0 3px, 3px 0;
  }
  75% {
    background-size: 100% 3px, 3px 100%, 100% 3px, 3px 0;
  }
  100% {
    background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
  }
}

使用方式 #

直接给你现有代码中的.right-box.left和.left-box元素添加border-animate类即可生效。如果需要调整边框粗细，修改代码中所有3px的数值即可；需要调整动画速度，修改animation属性中的时长参数即可。

内容的提问来源于stack exchange，提问作者Aayush Dahal