作者:书友73428983 | 来源:互联网 | 2023-02-05 10:32
我正在尝试创建一个仅用于解决文本的CSS解决方案.案文应该说:
研究...
而且我希望它能够淡入淡出,给用户留下一个印象,即它的研究速度与跳动的心脏相同.
这是我到目前为止的代码:
HTML:
Researching...
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中工作就足够了.
1> Niels..:
您的问题是您在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;