CSS Border Color Switch Animation: "From" Color Not Correct

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>

CSS Change color of border twice while giving it a left to right effect

You can achieve this using a :pseudo-element and transition.

body {  background: #444;}.box {  display: block;  position: relative;  width: 150px;  height: 50px;  background: #161a1c;  border-bottom: 2px solid #1f262d;  overflow: hidden;}.box::after {  content: '';  position: absolute;  width: 145%;  height: 3px;  bottom: 0;  left: -145%;  background: linear-gradient(to right, #1f262d 0%, white 45%, white 100%);  z-index: 1;  transition: left 0s;}.box:hover::after {  left: 145%;  transition: left 1s ease-in;}

<div class="box"></div>

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>

How can I get a border to switch colors indefinitely?

There is no border set on the CSS rule .style. Animations only apply on the properties of the element they are on. You have to set the animation on the p elements (that actually have the border), or add a border to the .story element.

p { /* p is the element that have the border, .story doesn't have it */  cursor: default;  line-height: 200%;  border-bottom: solid;  border-color: rgb(50, 50, 50);  color: white;}
@-webkit-keyframes p {  0% { border-color: red; }  50% { border-color: blue; }  100% { border-color: green; }}
p { /* set the animation on p which is the element that have the border */  -webkit-animation: p 10s infinite alternate;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="story">  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>

CSS border animation not working on object

The problem is with your use of !important inside of keyframes. Simply removing the !important declarations will cause your animation to work:

.object-color {  -webkit-animation: color 1.5s linear infinite alternate both;  animation: color 1.5s linear infinite alternate both;}
@-webkit-keyframes color {  14.3% {    color: red;    background-color: #e0ffff;    padding-right: 5px;    border: 1px solid green;  }  28.6% {    color: green;    background-color: #e0ffff;    padding-right: 5px;    border: 1px solid red;  }  100% {    color: green;    background-color: #e0ffff;    padding-right: 5px;    border: 1px solid red;  }}

<div class="object-color">Hi</div>

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>

CSS Border Color Switch Animation: "From" Color Not Correct