Question

如何使用css

每5秒闪烁两次文本

我有一个div

＆＃13;

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

＆＃13;

我想使用css

每5秒闪烁一次这个文本

我怎样才能实现这一目标？

我试过这个

how to make CSS animation to play every 10 seconds

但不是在

工作

我希望这可以在ie和chrome中使用

Answer 1

使用动画并正确调整属性。这是一个例子

Reduce(function(x, y) merge(x, y, by="V1", all.x = TRUE, all.y = TRUE),
              lapply(list(d1, d2, d3), function(x) cbind(x,V2=x$V1)))[,-1]
    V2.x   V2.y     V2
1 PA0001 PA0001 PA0001
2 PA0002   <NA>   <NA>
3 PA0003 PA0003   <NA>
4 PA0004   <NA>   <NA>
5 PA0005   <NA>   <NA>
6   <NA> PA0006   <NA>
7   <NA> PA0007 PA0007

.blink {
  color:black;
  font-size:30px;
  font-weight:bold;
  animation:blink 2.5s linear infinite alternate 2.5s;

}

@keyframes blink {
  0%,80% {
    color:black;
  }
  90% {
    color:red;
  }
  100% {
    color:black;
  }
}

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

另一个StackOverFlow帖子在这里： https://stackoverflow.com/a/16012979/3366361

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

2 个答案: