求助：实现指定路径的Border Animation（边框动画）效果

First, let's fix a quick syntax error in your original code: you had border-top-color: res; instead of border-top-color: red;—that was one small issue preventing your borders from displaying correctly. Beyond that, the transition-based approach you used was tricky to get the sequential timing right for your desired path. Let's switch to a keyframe-based solution that gives us precise control over each border segment:

Core Idea #

We'll use four separate elements (two pseudo-elements + two inner span elements) to represent each border side. Each segment will animate in sequence using @keyframes, with delays to ensure they run one after another, and we'll use forwards to keep each completed border visible permanently.

Final Code #

HTML #

<div class="draw">
  <span class="border-top"></span>
  <span class="border-right"></span>
  <a href="#"><img src="http://via.placeholder.com/200x100"></a>
</div>

CSS #

.draw {
  width: 300px;
  height: 200px;
  display: inline-block;
  padding: 30px;
  position: relative;
  border: 0;
}

/* Base styles for all border segments */
.draw::before,
.draw::after,
.draw .border-top,
.draw .border-right {
  content: '';
  position: absolute;
  box-sizing: border-box;
  border: 2px solid transparent;
}

/* 1. Left Border: Animate from bottom-left to top-left */
.draw::before {
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left-color: red;
  animation: drawLeft 0.5s ease-out forwards;
}

/* 2. Top Border: Animate from top-left to top-right (starts after left border finishes) */
.draw .border-top {
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top-color: red;
  animation: drawTop 0.5s ease-out 0.5s forwards;
}

/* 3. Right Border: Animate from top-right to bottom-right (starts after top border finishes) */
.draw .border-right {
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-right-color: red;
  animation: drawRight 0.5s ease-out 1s forwards;
}

/* 4. Bottom Border: Animate from bottom-right back to bottom-left (starts after right border finishes) */
.draw::after {
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom-color: red;
  animation: drawBottom 0.5s ease-out 1.5s forwards;
}

/* Keyframe definitions for each animation */
@keyframes drawLeft {
  to { height: 100%; width: 2px; } /* Match border width */
}

@keyframes drawTop {
  to { width: 100%; height: 2px; } /* Match border width */
}

@keyframes drawRight {
  to { height: 100%; width: 2px; } /* Match border width */
}

@keyframes drawBottom {
  to { width: 100%; height: 2px; } /* Match border width */
}

/* Optional: Trigger animation on hover instead of page load */
/* Uncomment this block if you want the animation to start when hovering over the element */
/*
.draw:hover::before {
  animation: drawLeft 0.5s ease-out forwards;
}
.draw:hover .border-top {
  animation: drawTop 0.5s ease-out 0.5s forwards;
}
.draw:hover .border-right {
  animation: drawRight 0.5s ease-out 1s forwards;
}
.draw:hover::after {
  animation: drawBottom 0.5s ease-out 1.5s forwards;
}
*/

How It Works #

1. Left Border: Starts at the bottom-left corner and animates upward to the top-left over 0.5 seconds.
2. Top Border: Begins 0.5 seconds after the left border finishes, animating rightward from the top-left to the top-right.
3. Right Border: Starts 1 second into the sequence, animating downward from the top-right to the bottom-right.
4. Bottom Border: Starts 1.5 seconds in, animating leftward from the bottom-right back to the bottom-left to complete the square.

The forwards keyword in each animation ensures that once a border segment is drawn, it stays visible instead of resetting to its initial state. If you prefer the animation to trigger on hover (like your original code), just uncomment the hover-specific animation rules at the bottom of the CSS.

内容的提问来源于stack exchange，提问作者digitalsuite.net