CODEWITHSUNDEEP
csscss-animations
Jeremy Levett
Jeremy Levett

Reputation: 947

Animate a border around an element in css

What would be the code for a webkit css animation that traces out the border around an element (say a div or a heading) from one corner, around the entire element ending up back at the original corner?

In layman's terms, if someone was drawing a rectangle by pencil in one single line around the element.

The effect must be permanent and not just occur when the user hovers over the element.

Upvotes: 0

Views: 603

Answers (1)

CodiMech25
CodiMech25

Reputation: 436

Maybe something like this?

@keyframes pencil {
  0% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #000 #fff #fff #fff;
  	top:0%;
    left: 0%;
  }
  25% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #fff #000 #fff #fff;
  	top:0%;
    right: 100%;
  }
  50% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #fff #fff #000 #fff;
  	top:100%;
    right: 100%;
  }
  75% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #fff #fff #fff #000;
  	top:100%;
    right: 0%;
  }
  100% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #fff #fff #fff #fff;
  	top:0%;
    right: 0%;
  }
}

.pencil-border {
	border: 2px solid #fff;
  animation: pencil 2s infinite linear;
}
<div class="pencil-border">
Test
</div>

Upvotes: 1

Related Questions