在CSS中将边框闪烁3次（每个循环1秒）

Question

嗨，我正在尝试在CSS中创建动画

应该每秒闪烁一次，然后重复3次。最后，边框在默认情况下应显示为常规

我尝试了以下方法，但最后边界消失了。最后，我需要边框颜色仍然与动画颜色相同

.alerts-border {
    border: 1px solid;
    animation: blink 1s;
    animation-iteration-count: 3;
}

@keyframes blink { 50% { border-color: #ff0000; }  }

Answer 1

现在默认颜色是红色。我将边框更改为＃ff0000，并将颜色闪烁为#fff；

.alerts-border {
    border: 1px #ff0000 solid;
    
    animation: blink 1s;
    animation-iteration-count: 3;
}

@keyframes blink { 50% { border-color:#fff ; }  }

<div class="alerts-border" style="height:40px;width:40px">

</div>