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