I want to make browser icon highlight when notification or message are arrived. I need to implement it in my angular project. So any suggestion how to achieve it?
on css
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
.blink {
width: 10px;
height: 10px;
border-radius: 10px;
animation: blinker 2s linear infinite;
background-color: red;
margin-right: 5px;
}
.main-content {
display: flex;
flex-direction: row;
align-items: center;
}
on html
<div class="main-content">
<i class="blink"></i>
</div>
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
.blink {
width: 10px;
height: 10px;
border-radius: 10px;
animation: blinker 2s linear infinite;
background-color: red;
margin-right: 5px;
}
.content {
display: flex;
flex-direction: row;
align-items: center;
}<div class="content">
<i class="blink"></i>
</div>
for blink just use @-webkit-keyframes blinker and set the delay according choice