CODEWITHSUNDEEP
cssanimation
Tuz
Tuz

Reputation: 1980

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

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>

Upvotes: 17

Views: 26703

Answers (1)

CHanaka
CHanaka

Reputation: 502

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>

Upvotes: 41

Related Questions