CSS 边框颜色切换动画："from" 颜色不正确

Question

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

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

我构建了一个最小的片段来演示这一点。知道我做错了什么吗？

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

Answer 1

这应该有效。

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

Answer 2

根据the documenation steps(2,start)会给出这个定时输出：

因此您将在第一个状态上花费 0 时间，一半时间在 50%（浅蓝色）上，一半时间在 100%（蓝色）上。使用 end 而不是 start 会有类似的逻辑，您将在最后一个状态上花费 0 时间。实际上，您要查找的是 frames 函数，但它实际上处于草稿阶段，使用 frames(2) 您将完全按照自己的意愿行事：

一个简单的解决方法是更改关键帧的值以强制每种颜色在不使用 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>

CSS 边框颜色切换动画："from" 颜色不正确

CSS border color switch animation: "from" color not correct

html

css

border

css-animations