“Animacja graniczna CSS Codepen” Kod odpowiedzi

Animacja graniczna CSS Codepen

.custom-field.three {
  --draw-duration: 0.1s;
  --draw-color: #222;
  --draw-line-width: 2px;
  --draw-easing: linear;
}

.custom-field.three .border {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
  display: flex;
  align-items: center;
  padding-left: 12px;
  border-radius: 3px;
}

.custom-field.three .border::after, 
.custom-field.three .border::before {
  content: "";
  width: 0;
  height: 0;
  display: inline-block;
  position: absolute;
  border-radius: 3px;
}

.custom-field.three .border::before {
  left: 0;
  bottom: 0;
  border-right: 0px solid var(--draw-color);
  border-bottom: 0px solid var(--draw-color);
  transition: 
    border 0s linear calc(var(--draw-duration) * 4),
    height var(--draw-duration) var(--draw-easing) calc(var(--draw-duration) * 2),
    width var(--draw-duration) var(--draw-easing) calc(var(--draw-duration) * 3);
}

.custom-field.three .border::after {
  right: 0;
  top: 0;
  border-left: 0px solid var(--draw-color);
  border-top: 0px solid var(--draw-color);
  transition: 
    border 0s linear calc(var(--draw-duration) * 2),
    height var(--draw-duration) var(--draw-easing),
    width var(--draw-duration) var(--draw-easing) var(--draw-duration);
}

.custom-field.three input:focus ~ .border::before,
.custom-field.three input:not(:placeholder-shown) ~ .border::before,
.custom-field.three input.dirty ~ .border::before,
.custom-field.three input:focus ~ .border::after,
.custom-field.three input:not(:placeholder-shown) ~ .border::after,
.custom-field.three input.dirty ~ .border::after {
  width: 100%;
  height: 100%;
  border-width: var(--draw-line-width);
}

.custom-field.three input:not(:placeholder-shown) ~ .border::before,
.custom-field.three input.dirty ~ .border::before,
.custom-field.three input:focus ~ .border::before {
  transition-delay: 0s, var(--draw-duration), 0s;
}

.custom-field.three input:not(:placeholder-shown) ~ .border::after,
.custom-field.three input.dirty ~ .border::after,
.custom-field.three input:focus ~ .border::after {
  transition-delay: 
    calc(var(--draw-duration) * 2), 
    calc(var(--draw-duration) * 3), 
    calc(var(--draw-duration) * 2);
}