CSS border color switch animation: “from” color not correct

I built a css animation and part of it is changing the border color of a div.

I'm using from and to values. The border should blink white and blue but instead of white I get a light blue.

I built a minimal snippet to demonstrate this. Any idea what I'm doing wrong?

.switch {
  width: 100px;
  height: 100px;
  border: 5px solid white;
  -webkit-animation: switch-animation 2s steps(2, start) infinite;
  animation: switch-animation 2s steps(2, start) infinite;
}

@keyframes switch-animation {
  from {
    border-color: white;
  }
  to {
    border-color: blue;
  }
}
@-webkit-keyframes switch-animation {
  from {
    border-color: white;
  }
  to {
    border-color: blue;
  }
}

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

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>

According to the documenation steps(2,start) will give this timing output:

So you will spend 0 time on the first state, half the time on the 50% (light blue) and half the time on the 100% (blue). You will have a similar logic using end instead of start where you will spend 0 time on the last state. Actually what you are looking for is the frames function but it's actually under draft and using frames(2) you will do exactly what you want:

An easy fix is to change the values of the keyframes to force each color to stay half the animation without using steps

.switch {
  width: 100px;
  height: 100px;
  border: 5px solid white;
  animation: switch-animation 2s infinite linear;
}

@keyframes switch-animation {
  0%,50% {
    border-color: white;
  }
  50.1%,100% {
    border-color: blue;
  }
}

<div class="switch"></div>

来源：https://stackoverflow.com/questions/51842908/css-border-color-switch-animation-from-color-not-correct

标签

html

css

css3

border

css-animations