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关键帧动画进行了尝试，但也无法正确处理。

我真的很感激任何帮助！

标签： htmlcsscss-transitions

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>