时间戳

首页 > 解决方案 > 闪烁文本 N 次

css - 闪烁文本 N 次

问题描述

我正在处理一个交易仪表板，我有一个“最后一次更新...”文本，它应该在开始时闪烁两次，然后保持静止。此外，还有一个持续 200 毫秒的加载程序。感谢任何帮助！

.BlinkingUpdate{
    margin-bottom: 0;
    color: #000;
    font-size: 18px;
    margin-top: 5px;
    text-align: left;
    margin-right: 15px;
    animation: blinker 1.5s; 
}

@keyframes blinker {   
     50% {
      opacity: 0;
    }
 }
<p class="BlinkingUpdate">Last refresh happened sunday</p>

标签： css

解决方案

使用动画迭代计数（设置为2）

.BlinkingUpdate{
  animation: blinker 1.5s 2; 
}

@keyframes blinker {   
  50% {
    opacity: 0;
  }
}
<p class="BlinkingUpdate">Last refresh happened sunday</p>

请记住，animation速记属性包括：
duration | 缓动功能 | 延迟 | 迭代次数| 方向 | 填充模式 | 游戏状态

因此，如果你想添加一个初始的 200 毫秒延迟- 在迭代计数之前设置它：

.BlinkingUpdate {
  animation: blinker 1.5s 0.2s 2;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<p class="BlinkingUpdate">Last refresh happened sunday</p>

推荐阅读