Css3 Animate Border Color

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 color switch animation: from color not correct

This should work.

.switch {  width: 100px;  height: 100px;  border: 5px solid white;  -webkit-animation: switch-animation 2s steps(1, start) infinite;  animation: switch-animation 2s steps(1, start) infinite;}
@keyframes switch-animation {  0%,100% {    border-color: white;  }  50% {    border-color: blue;  }}@-webkit-keyframes switch-animation {  0%,100%{    border-color: white;  }  50% {    border-color: blue;  }}

<html>  <head></head>  <body>    <div class="switch"></div>  </body></html>

Border-color transition css3 bug

Updated fiddle.

Explicitly state the transparent border in the normal state of the link:

.bouton a {
    transition: background-color 1s, border-color 1s;
    padding: 5px 7px 8px 7px;
    text-decoration: none;
    border: 1px solid transparent; /* this */
}

CSS animate border in and out

You can resolve the issue by animating only border-width

See result:

.item {  height: 250px;  width: 250px;  display: block;  background: orange;  -webkit-transition: all .5s ease-in-out;  transition: all .5s ease-in-out;  border: 0px solid green;}
.item:hover {  border-width: 8px;}

<div class="item"></div>

Animate a border color

You can chain it together with an animation back to the previous color. For example:

inp.css('border-color', 'green').animate({"border-color":"previous-color"}, 1000);

animating border to transparent with keyframes

You won't see anything because you background-color is the same color as the border color. Also your border definition inside your animation was wrong, the width must come before the border style:

So for example it's 1px solid color instead of solid 1px rgba(255,0,0,1).

.pulse {  animation: pulse 1s ease infinite alternate;  background-color: #ddd;  border-radius: 100px;  height: 100px;  margin: 20px;  width: 100px;}
@keyframes pulse {  0% {    border: 1px solid rgba(255, 0, 0, 1)  }  100% {    border: 1px solid rgba(255, 0, 0, 0)  }}

<div class="animation">  <div class="pulse"></div></div>

How to animate border so that it displays slowly from start to finish

A way of making the border of an element looking animated is to gradually unveil the borders in turn by gradually shrinking a 5px wide (or high depending on which border) 100% wide element that is overlaying each border.

This snippet does this by animating the after pseudo element on the element and at the same time putting one border after another into the required final color.

You can put the class movingBorder from this snippet onto other elements to get the moving border effect.

.movingBorder {
  width: 60vw;
  height: 60vh;
  border: solid 5px lime;
  position: relative;
  background: pink;
  animation: changeBorders 5s linear;
}

@keyframes changeBorders {
  0% {
    border: solid 5px white;
    border-left: solid 5px lime;
  }
  25% {
    border: solid 5px white;
    border-left: solid 5px lime;
  }
  25.02% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
  }
  50% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
  }
  50.02% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
    border-right: solid 5px lime;
  }
  75% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
    border-right: solid 5px lime;
  }
  75.02% {
    border: solid 5px lime;
  }
}

.movingBorder::after {
  width: 5px;
  background-color: white;
  height: 0px;
  position: absolute;
  bottom: 0;
  left: -5px;
  z-index: 1;
  animation: movedown 5s linear;
  animation-fill-mode: forwards;
  content: '';
  display: inline-block;
}

@keyframes movedown {
  0% {
    height: calc(100% + 10px);
    width: 5px;
    bottom: -5px;
    left: -5px;
  }
  25% {
    height: 5px;
    width: 5px;
    bottom: -5px;
    left: -5px;
  }
  25.01% {
    height: 5px;
    width: calc(100% + 10px);
    bottom: -5px;
    left: -5px;
  }
  50% {
    height: 5px;
    width: 0%;
    left: 100%;
    bottom: -5px;
  }
  50.01% {
    height: calc(100% + 10px);
    width: 5px;
    left: 100%;
    bottom: -5px;
  }
  75% {
    height: 0;
    width: 5px;
    left: 100%;
    bottom: 100%;
  }
  75.01% {
    height: 5px;
    width: calc(100% + 10px);
    left: 0%;
    bottom: 100%;
  }
  99.01% {
    height: 5px;
    width: 0;
    left: 0;
    bottom: 100%;
  }
}

<div class="movingBorder" style="background: pink; width: 60vw; height: 60vh;"></div>

Animate a border with CSS

I don't know about your HTML & CSS skills but maybe you are doing something wrong with the linking of your stylesheet:

<link rel="stylesheet" href="styles.css">

Be sure to corectly set the paths (look at this example : External CSS) and maybe give a glimpse at the basics of HTML, just in case?
- HTML Introduction
Also, check if the path is relative or absolute:

Relative Paths:

index.html
/graphics/image.png
/help/articles/how-do-i-set-up-a-webpage.html

Absolute Paths:

http://www.example.com
http://www.example.com/graphics/image.png
http://www.example.com/help/articles/how-do-i-set-up-a-webpage.html

See the Full reference about the paths.

Hope I helped.

CSS Border Transparency Animation

Use CSS variables:

.border {  border-bottom: 5px solid rgba(var(--c),0.5);  animation: animation 4s infinite alternate linear;  height:20px;}
.border1{  --c:255,0,0;
 }.border2{  --c:0,255,0; }
@keyframes animation {  from {border-bottom-color: rgba(var(--c), 0);}  to {border-bottom-color: rgba(var(--c), 0.5);}}

<div class="border border1"></div>
<div class="border border2"></div>