目前，我有这样的代码:
@-webkit-keyframes blinker {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
.waitingForConnection {
-webkit-animation-name: blinker;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
-webkit-animation-duration: 1.7s;
}
它会眨，但只会“朝一个方向”眨。我的意思是，它只是淡出，然后它以不透明度:1.0再次出现，然后再次淡出，再次出现，如此循环……
我想让它淡出，然后从这个淡出再次“提升”到不透明度:1.0。这可能吗?
当前回答
.neon {
font-size: 20px;
color: #fff;
text-shadow: 0 0 8px yellow;
animation: blinker 6s;
animation-iteration-count: 1;
}
@keyframes blinker {
0% {
opacity: 0.2;
}
19% {
opacity: 0.2;
}
20% {
opacity: 1;
}
21% {
opacity: 1;
}
22% {
opacity: 0.2;
}
23% {
opacity: 0.2;
}
36% {
opacity: 0.2;
}
40% {
opacity: 1;
}
41% {
opacity: 0;
}
42% {
opacity: 1;
}
43% {
opacity: 0.5;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
我使用font-family: "Quicksand"， sans-serif;
这是对字体的导入(放到style。css的顶部)
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");
其他回答
获得纯“100%开，100%关”闪烁的最好方法，就像老的<blink>是这样的:
.blink { 动画:眨眼器1s步开始无限; ｝ @keyframes blinker { 50% { 透明度:0; ｝ ｝ < div class = "眨眼”>眨眼< / div >
我使用class=blink对各自的元素进行处理
简单JS代码
// Blink
setInterval(function()
{
setTimeout(function()
{
//$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
$(".blink").css("visibility","hidden"); // This is for Visibility of the element
},900);
//$(".blink").css("color","rgba(0,0,0,1)"); // If you want simply black/white blink of text
$(".blink").css("visibility","visible"); // This is for Visibility of the element
},1000);
这是每个人的好榜样。试一试
.blinking_live {
height: 15px;
width: 15px;
border-radius: 15px;
background: #58C03D;
animation: blink-live 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes blink-live{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
<div class="blinking_live"></div>
如果你想要平滑的动画，试试这个。
.blink {
animation: blinker 1s infinite;
}
@keyframes blinker {
from { opacity: 1.0; }
50% { opacity: 0.5; }
to { opacity: 1.0; }
}
<span class="blink">I am blinking</span>
我的解决方案:
.blink { 动画:blinkMe 2s线性无限; ｝ @keyframes blinkMe { 0% { 透明度:0; ｝ 50% { 透明度:1; ｝ 100% { 透明度:0; ｝ ｝ < p class = "眨眼”>眨眼< / p >
我使用blinkMe作为动画的名称，2s作为持续时间，线性的时间，无限的，这样它就会永远重复。
我们需要使用JavaScript和jQuery的旧浏览器，因为他们不支持动画和/或@keyframes:
$(文档)时函数(){ setinterval(函数(){ $ (" .blink ") .fadeIn (1000) .fadeOut (1000); },2000) })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js " > < /脚本> < p class = "眨眼”>眨眼< / p >
如果你想做一个闪烁效果，就像闪烁标签一样，这将会起作用:
.blink { 动画:眨眼0.5s步启动无限; ｝ @keyframes blink { 0% { 透明度:1; ｝ 50% { 透明度:0; ｝ 100% { 透明度:1; ｝ ｝ < p class = "眨眼”>眨眼< / p >
如果您想调整速度，请更改持续时间。
