边框动画关键帧/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>