如何仅使用 CSS 创建“闪烁”文本？答案

【问题标题】：How to create "Blinking" text with CSS only?如何仅使用 CSS 创建“闪烁”文本？
【发布时间】：2017-09-28 23:26:21
【问题描述】：

我正在尝试为闪烁文本创建一个纯 CSS 的解决方案。文字应该说：

正在研究...

而且我希望它淡入淡出，给用户留下这样的印象，即它正在以与跳动的心脏相同的速度进行研究。

这是我目前的代码：

HTML：

<p class="blinking">Researching...</p>

CSS：

.blinking {
    transition: opacity 2s ease-in-out infinite;
  opacity: 1;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5
  }

  100% {
    opacity: 0;
  }
}

但这不起作用，这也是针对chrome扩展的，所以只要它在最新版本的chrome中工作就足够了。

【问题讨论】：

用animation替换transition
把transition替换成动画，你也可以加alternatejsfiddle.net/Lg0wyt9u/1864

标签： css css-transitions

【解决方案1】：

应该这样做

.blinking {
    animation: mymove 2s infinite alternate;
}

@keyframes mymove {
    from {opacity:0;}
    to {opacity: 1;}
}

&lt;p class="blinking"&gt;Researching...&lt;/p&gt;

这是一个更流畅的动画

【讨论】：

【解决方案2】：

您的问题是您在 1 行中使用了过渡和动画。

将您的transition 更改为animation，如下所示。还将不透明度更改为 1 -> 0 -> 1 而不是 1 -> 0.5 -> 0，因为您希望闪烁而不是 1 -> 0，而不是再次过渡到 1 不透明度。

小提琴：https://jsfiddle.net/kc6936cw/

.blinking {

    animation: opacity 2s ease-in-out infinite;
    opacity: 1;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0
  }

  100% {
    opacity: 1;
  }
}

编辑： 也可以使用 jtmingus 注释：
您还可以将 alternate 标签添加到末尾，而不是从 1 -> 0 -> 1。看起来像animation: opacity 2s ease-in-out infinite alternate;

【讨论】：

太棒了！就是这样。我会尽快接受你的回答。
您也可以将alternate 标签添加到末尾，而不是从 1 -> 0 -> 1。这看起来像 animation: opacity 2s ease-in-out infinite alternate;

【解决方案3】：

.blinking {
    transition: opacity 2s ease-in-out infinite;
    animation: blinker 1s linear infinite;
  opacity: 1;
}

@keyframes blinker {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5
  }

  100% {
    opacity: 0;
  }
}

已经有一个很好的例子 How to make blinking/flashing text with css3?

【讨论】：

【解决方案4】：

显然，应该使用animation 而不是transition。

.blinking {
  animation-name:animate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  opacity: 1;
}

@keyframes animate {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5
  }

  100% {
    opacity: 0;
  }
}

【讨论】：