Question

我试图在动画过程中使文本在其背景和自己的颜色之间反转颜色。

现在我可以让它在第一次拍摄时很好地翻转颜色，但是当它应该向后转换以使颜色再次成为默认颜色时，它会在两者之间产生混乱的颜色。以下是我目前为动画编写的内容：

＆＃13;

body {
  background: #3866af;
  color: #ffebb5;
}

.blink {
  animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {
  from {
    background: #3866af;
    color: #ffebb5;
  }
  to {
    background: #ffebb5;
    color: #3866af;
  }
}

＆＃13;

This is how text would normally look 
<br>
<span class="blink">and this is what blinking text looks like right now</span>

＆＃13;

我想要的是字母变成蓝色，这些字母的背景变成米色。

我希望不必使用javascript来完成这项任务，因为我相信它可以完全用CSS完成。

谢谢！

编辑：

我选择的解决方案来自Farhad Bagherlo的答案：

＆＃13;

body {
  background: #3866af;
  color: #ffebb5;
}

.blink {
  animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {
    0% {
       background-color:#3866af;
       color: #ffebb5;
    }
    50% {
       background-color:#3866af;
       color: #ffebb5;
    }
    51% {
       background-color: #ffebb5;
       color:#3866af;
    }
    100% {
       background-color: #ffebb5;
       color:#3866af;
    }
}

＆＃13;

This is how text would normally look 
<br>
<span class="blink">and this is what blinking text looks like right now</span>

＆＃13;

Answer 1

＆＃13;

body {
  background: #3866af;
  color: #ffebb5;
}

.blink {
  animation: blink-animation 1s steps(4, start) infinite;

}

@keyframes blink-animation {
0% {
       background-color:#3866af;
    color: #ffebb5;
  }
  50% {
      background-color:#3866af;
    color: #ffebb5;
  }
  75% {
  background-color: #ffebb5;
    color:#3866af;
  }
  100% {
    background-color: #ffebb5;
    color:#3866af;
  }
}

＆＃13;

This is how text would normally look 
<br>
<span class="blink">and this is what blinking text looks like right now</span>

＆＃13;

在CSS动画中正确反转文本和背景颜色？

1 个答案: