CSS边框颜色切换动画:“来自"颜色不正确

本文介绍了CSS边框颜色切换动画:“来自"颜色不正确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我制作了一个 css动画，其中一部分正在更改div的边框颜色.

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

我正在使用 from 和 to 值.边框应该闪烁白色和蓝色，但我会得到浅蓝色，而不是白色.

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>

推荐答案

这应该有效.

.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边框颜色切换动画:“来自"颜色不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！