为在 2 点处启动的边框设置动画

Question

如何为从 2 个不同点开始然后像这样连接在一起的边框设置动画：

Answer 1

这可能与您正在寻找的内容非常相似，希望对您有所帮助

HTML

<div class="border__shadow">
  <span>2012</span>
</div>

<div class="border__shadow">
  <span>2013</span>
</div>

<div class="border__shadow">
  <span>2014</span>
</div>

CSS

.border__shadow {
  background: #fff;
  cursor: pointer;
  position: relative;
  margin: 2%;
  line-height: 350px;
  text-align: center;
  width: 200px;
  height: 350px;
  overflow: hidden;
  transition: background 350ms 600ms ease-in-out;
}
.border__shadow:hover {
  background: #2c3e50;
  transition-delay: 0ms;
}
.border__shadow:hover > span {
  color: #fff;
  transition-delay: 0ms;
}
.border__shadow::after {
  box-shadow: 0 -348px 0 0.0619em #fff, 202px -348px 0 0 transparent, 400px -348px 0 0 #fff, 198px 0 0 0 #fff, 198px 350px 0 transparent, 198px 700px 0 #fff, -198px -700px 0 #fff, -198px -350px 0 0 transparent, -198px 0 0 0 #fff, -400px 348px 0 0 #fff, -400px 348px 0 0 transparent, 0 348px 0 0.0619em #fff;
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 198px;
  height: 348px;
  transition: box-shadow 950ms ease-in-out;
}
.border__shadow:hover::after {
  box-shadow: -400px -348px 0 0 #fff, -400px -348px 0 0 transparent, 0 -348px 0 0.0619em #fff, 198px -700px 0 #fff, 198px -350px 0 transparent, 198px 0 0 #fff, -198px 0 0 #fff, -198px 350px 0 transparent, -198px 700px 0 #fff, 0 348px 0 0.0619em #fff, 202px 348px 0 0 transparent, 400px 348px 0 0 #fff;
}
.border__shadow::before {
  border: 2px solid #2c3e50;
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 350px;
}
.border__shadow > span {
  color: #2c3e50;
  font-weight: 500;
  letter-spacing: 4px;
  transition: color 350ms 600ms ease-in-out;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

body {
  background: #2c3e50;
  font-family: 'Roboto', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

Live Example

为在 2 点处启动的边框设置动画

Animate a border that iniciate at 2 points

css

animation

jquery-animate

border