Create blinking fontawesone effect

Navigation
2

I have software that part is an internal chat, I want to put the font effect flashing when a new message arrives. 

<i class="fa fa-comments"></i>

Next to the name I have the fontawsome image above, and when I get the message I want the font to flash.

    
asked by anonymous 14.05.2018 / 15:27

2 answers

5

One option is to use opacity from 0 to 1 , and apply an animation. Here's an example: 

 @keyframes fa-blink {
     0% { opacity: 1; }
     50% { opacity: 0.5; }
     100% { opacity: 0; }
 }
.fa-blink {
   -webkit-animation: fa-blink .75s linear infinite;
   -moz-animation: fa-blink .75s linear infinite;
   -ms-animation: fa-blink .75s linear infinite;
   -o-animation: fa-blink .75s linear infinite;
   animation: fa-blink .75s linear infinite;
}
   
<img class="fa-blink" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png"/>

Tousejustinserttheclassfa-blinkintoyour<i>.See:

<iclass="fa fa-comments fa-blink"></i>
    
14.05.2018 / 15:38
2

You can create an animation associated with FontAwesome, type the class .fa.pisca . So whenever you use FontAwesome you just need to add the class pisca where you want to flash. <i class="fa ... pisca"></i>

See the example 

.fa.pisca {
    font-size: 30px;
    color: red;
    opacity: 0;
    animation: anima 1s ease infinite;
}
@keyframes anima {
    to {
        opacity: 1;
    }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i class="fa fa-comments pisca"></i> pisca

Example with animation only in :hover 

.fa.pisca {
    font-size: 30px;
    color: red;
    opacity: 1;
}
@keyframes anima {
    to {
        opacity: 0;
    }
}
ul {
    list-style: none;
}
li {
    cursor: pointer;
}
li:hover .pisca {
    animation: anima 750ms ease infinite;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
    <li><i class="fa fa-comments pisca"></i> pisca</li>
</ul>
    
14.05.2018 / 15:43
What is the equivalent of 'explode' from PHP in Python? Questions about ID in the registrations of a web rearguard system