使用css将div内的文本闪烁两次

Question

如何使用 css 每 5 秒闪烁两次文本

我有一个 div

<div class="blink">text</div>

我想使用 css 每 5 秒使该文本闪烁两次

我怎样才能做到这一点？

我试过了

how to make CSS animation to play every 10 seconds

但不能在 ie 中工作

我希望它可以在 ie 和 chrome 中工作

Answer 1

使用动画并调整如下属性：

.blink {
  color:black;
  font-size:30px;
  font-weight:bold;
  animation:blink 2.5s linear infinite alternate 2.5s;

}

@keyframes blink {
  80% {
    color:black;
  }
  90% {
    color:red;
  }
  100% {
    color:black;
  }
}

<div class="blink">This text will blink twice every 5 seconds</div>

Answer 2

#text {
  font-weight: bold;
  font-size: 20px;
  animation-name: blink;
  animation-duration: 5s;
   animation-iteration-count: infinite;
}

@keyframes blink {
    0% {color: pink}
    50% {color: black;}
    100% {color: pink;}
    }

<div id="text">
  No more lights
</div>

您可以在此处查看 CSS3 动画示例/属性：https://www.w3schools.com/css/css3_animations.asp

这里还有另一个 * 帖子： https://*.com/a/16012979/3366361