如何仅使用 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 不透明度。

小提琴：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;

Answer 2

这个应该这样做

.blinking {
animation: mymove 2s infinite alternate;
}
@keyframes mymove {
from {opacity:0;}
to {opacity: 1;}
}

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

这是一个更流畅的动画

Answer 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;
}
}

已经有一个很好的例子 如何使用css3制作闪烁/闪烁的文本？

Answer 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;
}
}