html - 边框动画关键帧/CSS 动画

Question

我有一个想要实现的动画，但无法正确实现。我在互联网上搜索并找到了一些解决方案，但是它们在动画中有轻微的变化。

我想要一个边框动画，它从左下角开始到左上角，然后是右上角，然后是右下角，最后回到左下角。一个接一个的动画和曾经出现的边框应该在之后保持可见。

这是我设法获得的代码:https://jsfiddle.net/gwbn427m/

div {
  width: 300px; 
  height: 200px;
  display: inline-block;
  padding: 30px;
  /*bottom: -25;*/
  position: relative;
  border: 0;
}

.draw {
  transition: color 0.25s;
}

.draw::before,
.draw::after {
  /* Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts*/
  border: 2px solid transparent;
  width: 0;
  height: 0;
  box-sizing: inherit;
  content: '';
  position: absolute;
}

/* This covers the top & right borders (expands right, then down)*/
.draw::before {
  left: 0;
  bottom: 0;
}

/* And this the bottom & left borders (expands left, then up) */
.draw::after {
  right: 0;
  top: 0;
}

.draw:hover {
  color: red;
}

/* Hover styles */
.draw:hover::before,
.draw:hover::after {
  width: 100%;
  height: 100%;
}

.draw:hover::before {
  border-top-color: res; /*Make borders visible */
  border-right-color: red;
  transition:
  width 0.25s ease-out 0.25s,  /* And then height */
  height 0.25s ease-out; /* Width expands first */
}

.draw:hover::after {
  border-bottom-color: red; /* Make borders visible */
  border-left-color: red;
  transition:
  border-color 0s ease-out 0.5s, /* Wait for ::before to finish before showing border*/			
  width 0.25s ease-out 0.75s, /* And finally height*/
  height 0.25s ease-out 0.5s; /*And then exanding width*/
}

<div class="draw">
  <a href="https://placeholder.com"><img src="http://via.placeholder.com/200x100"></a>
</div>

但是我已经用那些 https://codepen.io/sean_codes/pen/YZWqLo 试过了关键帧动画，也做不对。

我真的很感激任何帮助!

Answer 1

要实现这一点，您需要两个 div，以便您可以使用其伪元素 :before 和 :after 创建四个不同的元素，然后使用 transition- delay 延迟transition

.main {
  width: 200px;
  height: 200px;
  position: relative;
}

.item {
  height: 100%;
}

.main:before,
.main:after,
.item:before,
.item:after {
  content: "";
  position: absolute;
  background: red;
}

.main:before {
  width: 2px;
  height: 0;
  bottom: 0;
  left: 0;
}

.main:after {
  height: 2px;
  width: 0;
  top: 0;
  left: 0;
}

.item:before {
  width: 2px;
  height: 0;
  top: 0;
  right: 0;
}

.item:after {
  height: 2px;
  width: 0;
  right: 0;
  bottom: 0;
}

.main:hover:before {
  height: 100%;
  transition: all .5s linear;
}

.main:hover:after {
  width: 100%;
  transition: all .5s linear .5s;
}

.main:hover .item:before {
  height: 100%;
  transition: all .5s linear 1s;
}

.main:hover .item:after {
  width: 100%;
  transition: all .5s linear 1.5s;
}

<div class="main">
  <div class="item">
    Some Content
  </div>
</div>