改变持续时间和不透明度以适应。

.blink_text { 
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: linear; 
    animation-iteration-count: infinite; color: red; 
} 

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
}

@-webkit-keyframes blinker { 
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
} 

@keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.3; } 
    100% { opacity: 1.0; } 
}

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinker { 0%{不透明度:1.0;｝ 50%{不透明度:0.0;｝ 100%{透明度:1.0;｝ ｝ .blink { 宽度:10 px; 高度:10 px; border - radius: 10 px; 动画:眨眼2s线性无限; 背景颜色:红色; margin-right: 5 px; ｝ .content { 显示:flex; flex-direction:行; 对齐项目:中心; ｝ < div class = "内容" > <我类=“眨眼”> < / i > 生活 < / div >

这是每个人的好榜样。试一试

.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>

使用动画方向的替代值(你不需要这样添加任何keframes)。

备用 动画应该在每个循环中反转方向。当反向播放时，动画步骤将反向执行。此外，定时函数也反转;例如，在反向播放时，缓进动画将被缓出动画取代。用于确定它是偶数还是奇数迭代的计数从1开始。

CSS:

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

我已经删除了关键帧。如果它缺失，它将从元素上为动画属性(在本例中为不透明度)设置的值生成，或者如果您没有设置它(在本例中也没有)，则从默认值(不透明度为1)生成。

请不要只使用WebKit版本。在它后面也加一个没有前缀的。如果你只是想写更少的代码，使用速记。

.waitingForConnection { animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate; } @keyframes blinker { to { opacity: 0; } } .waitingForConnection2 { animation: blinker2 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate; } @keyframes blinker2 { to { opacity: 0; } } .waitingForConnection3 { animation: blinker3 1s ease-in-out infinite alternate; } @keyframes blinker3 { to { opacity: 0; } } <div class="waitingForConnection">X</div> <div class="waitingForConnection2">Y</div> <div class="waitingForConnection3">Z</div>

.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");

如果你想要平滑的动画，试试这个。

    .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>