如何用CSS创建"闪烁"文本？

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 extenson,因此只要它在最新版本的chrome中工作就足够了.

Answer 1

您的问题是您在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;