css - 如何仅使用 CSS 创建 "Blinking"文本？

Question

我正在尝试为闪烁文本创建一个纯 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 中工作就足够了。

Answer 1

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

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

fiddle :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 ;