Border animation Keyframes/CSS Animation

Question

I have an animation that I want to achieve and I am not able to be getting it right. I've searched the internet and found some solutions, however they have a slight change in the animation.

I want a border animation that starts at the bottom left goes to top left then top right then bottom right and finally back to bottom left. Each animation after another and the borders once appeared should stay visible afterwards.

This is the code I've managed to get: 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>

However I've tried it with those https://codepen.io/sean_codes/pen/YZWqLo keyframe animation and couldn't get it right either.

I really would appreciate any help!

Answer 1

To achieve that you will need two divs so that you can create four different elements using its pseudo elements :before and :after and then use transition-delay to delay the 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>