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

根据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>

Answer 2

这应该有效。

.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边框颜色切换动画：“ from”颜色不正确

2 个答案: