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