Create flashing fontawesone effect

Asked

Viewed 9,650 times

3

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

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

Next to the name I have the image from the fontawsome above, and when the message arrives I want the font to blink.

css
  • 2

    Flashing like? "Fading and Appearing" or "Alternating Color"?

  • https://daneden.github.io/animate.css/ Tututi, tututu :P

2 answers

7


One option is to use opacity going from 0 to 1, and apply an animation. See 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"/>

To use just insert the class fa-blink in his <i>. Behold:

 <i class="fa fa-comments fa-blink"></i>
  • 1

    The way it is there you don’t need 50% { opacity: 0.5; }, he’ll already be that by interpolation

3

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

Take 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 on :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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.