htmlcssbordercss-animations

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>

Solution

  • 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>