Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Blink border 3 times (1 second per loop) in css

Tags:

css

animation

Hi i am trying to create animation in css

should blink per second and then repeat 3 times. at the end the border should look regular by default

I tried the following but the border is disappeared by the end. at the end I need the border color still be the same as the animation color

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

@keyframes blink { 50% { border-color: #ff0000; }  }
<div class="alerts-border">
</div>
like image 438
Tuz Avatar asked Aug 09 '18 10:08

Tuz


1 Answers

Now default color is red. I changed border to #ff0000 and blink color to #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>
like image 93
CHanaka Avatar answered Sep 28 '22 07:09

CHanaka