Drawing Border Colors During a CSS Transition

Drawing border colors during a CSS transition

I would use multiple linear-gradient and a complex animation (by animating size/position of each one) to obtain the final result. If you get the trick you can easily adjust the different values to obtain any animation you want.

.draw {  padding: 20px 50px;  outline:none;  border: none;  box-shadow: none;  background-image:   linear-gradient(#f45e61, #f45e61),   linear-gradient(#f45e61, #f45e61),   linear-gradient(#f45e61, #f45e61),   linear-gradient(#f45e61, #f45e61),     linear-gradient(#60daaa, #60daaa),   linear-gradient(#60daaa, #60daaa),   linear-gradient(#60daaa, #60daaa),   linear-gradient(#60daaa, #60daaa);    background-position: 0 0, 0 0, 0 100%, 0 100%,                        0 0, 0 0, 0 100%, 100% 0;  background-size: 3px 0%, 0% 3px, 0% 3px, 3px 0%,                     3px 100%, 100% 3px, 100% 3px,3px 100%;  background-color:transparent;  background-repeat:no-repeat;  transition:0.2s linear;}
.draw:hover {  background-position: 0 100%, 0 0, 0 100%, 100% 0,                        0 0, 0 0, 0 100%, 100% 0;  background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%,                     3px 100%, 100% 3px, 100% 3px,3px 100%;  animation: animate 1.4s linear infinite 0.2s;}
@keyframes animate {  0% {  background-position: 0 100%, 0 0, 0 100%, 100% 0,                        0 0, 0 0, 0 100%, 100% 0;  background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%,                     3px 100%, 100% 3px, 100% 3px,3px 100%;  }  40% {  background-position: 0 100%, 100% 0, 100% 100%, 100% 0,                        0 0, 0 0, 0 100%, 100% 0;  background-size: 3px 0%, 100% 3px, 0% 3px,3px 100%,                     3px 100%, 100% 3px, 100% 3px,3px 100%;  }  60% {  background-position: 0 100%, 100% 0, 100% 100%, 100% 100%,                        0 0, 0 0, 0 100%, 100% 0;  background-size: 3px 0%, 0% 3px, 100% 3px,3px 100%,                     3px 100%, 100% 3px, 100% 3px,3px 100%;  }  70% {  background-position: 0 100%, 100% 0, 0% 100%, 100% 100%,                        0 0, 0 0, 0 100%, 100% 0;  background-size: 3px 100%, 0% 3px, 100% 3px,3px 0%,                     3px 100%, 100% 3px, 100% 3px,3px 100%;  }  80% {  background-position: 0% 0%, 0% 0, 0% 100%, 100% 100%,                        0 0, 0 0, 0 100%, 100% 0;  background-size: 3px 100%, 0% 3px, 0% 3px,3px 0%,                     3px 100%, 100% 3px, 100% 3px,3px 100%;  }  100% {  background-position: 0% 0%, 0 0, 0 100%, 100% 100%,                        0 0, 0 0, 0 100%, 100% 0;  background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%,                     3px 100%, 100% 3px, 100% 3px,3px 100%;    }}

<button class="draw">Draw</button>

CSS Border transitions infinite animation loop

You can use almost the same styles, but with CSS animations instead of transitions.

button {  background: none;  border: 0;  box-sizing: border-box;  box-shadow: inset 0 0 0 2px #f45e61;  color: #f45e61;  font-size: inherit;  font-weight: 700;  margin: 1em;  padding: 1em 2em;  text-align: center;  text-transform: capitalize;  vertical-align: middle;}.draw {  overflow: hidden;  position: relative;}.draw::before, .draw::after {  content: '';  box-sizing: border-box;  position: absolute;  border: 2px solid transparent;  width: 0;  height: 0;}.draw::before {  top: 0;  left: 0;  border-top-color: #60daaa;  border-right-color: #60daaa;  animation: border 2s infinite;}.draw::after {  bottom: 0;  right: 0;  animation: border 2s 1s infinite, borderColor 2s 1s infinite;}
@keyframes border {  0% {    width: 0;    height: 0;  }  25% {    width: 100%;    height: 0;  }  50% {    width: 100%;    height: 100%;  }  100% {    width: 100%;    height: 100%;  }}@keyframes borderColor {  0% {    border-bottom-color: #60daaa;    border-left-color: #60daaa;  }  50% {    border-bottom-color: #60daaa;    border-left-color: #60daaa;  }  51% {    border-bottom-color: transparent;    border-left-color: transparent;  }  100% {    border-bottom-color: transparent;    border-left-color: transparent;  }}

<h1>CSS Border Transitions</h1><button class="draw">draw</button>

Drawing round border animation with transparent background CSS

You can easily do this with an SVG element by creating a curved path and animating stroke:

svg {  width: 200px;  border:1px solid;}
svg path {  stroke: red;  stroke-width: 5px;  stroke-dasharray: 140;  stroke-dashoffset: 140;  fill: transparent;  transition:1s;}svg:hover path{  stroke-dashoffset: 0;}

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 64 40'>  <path d='M14 40 L50 40 C56 40 58 36 58 32 L58 24 C58 20 56 16 50 16 L14 16 C8 16 6 20 6 24 L6 32 C6 36 8 40 14 40 Z' />  <text x=18 y=33>text</text></svg>

Animating the border in CSS

I'd say that in your case, you probably want transitions, not animations. Personally, I would say that if you can use a transition instead of an animation, you should use the transition. Only use animations when you can't do what you want with a transition.

Changing the border colour on hover is trivial:

.my-element {
  border-bottom: 1px solid transparent;
  transition: border-color 300ms;
}

.my-element:hover {
  border-color: orange;
}

If you want the border to animate from 0 to 100% width, you can't do that with a border. But you can use a pseudoelement:

.my-element::after {
  content: " ";
  display: block;
  width: 0;
  height: 2px;
  background: orange;
  transition: width 300ms;
}

.my-element:hover::after {
  width: 100%;
}

I've created a demo that you can view here: https://jsfiddle.net/65pceLrp/

Don't forget that you'll also want to vendor-prefix your transitions with -webkit-transition, -moz-transition etc.

Drawing Border Colors During a CSS Transition