Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pulse animation for FontAwesome icons
.fa-bounce {
display: inline-block;
position: relative;
-moz-animation: bounce 1s infinite linear;
-o-animation: bounce 1s infinite linear;
-webkit-animation: bounce 1s infinite linear;
animation: bounce 1s infinite linear;
}
@-webkit-keyframes bounce {
0% { top: 0; }
50% { top: -0.2em; }
70% { top: -0.3em; }
100% { top: 0; }
}
@-moz-keyframes bounce {
0% { top: 0; }
50% { top: -0.2em; }
70% { top: -0.3em; }
100% { top: 0; }
}
@-o-keyframes bounce {
0% { top: 0; }
50% { top: -0.2em; }
70% { top: -0.3em; }
100% { top: 0; }
}
@-ms-keyframes bounce {
0% { top: 0; }
50% { top: -0.2em; }
70% { top: -0.3em; }
100% { top: 0; }
}
@keyframes bounce {
0% { top: 0; }
50% { top: -0.2em; }
70% { top: -0.3em; }
100% { top: 0; }
}
/* Icon pulse */
.fa-pulse {
display: inline-block;
-moz-animation: pulse 2s infinite linear;
-o-animation: pulse 2s infinite linear;
-webkit-animation: pulse 2s infinite linear;
animation: pulse 2s infinite linear;
}
@-webkit-keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@jumph4x

This comment has been minimized.

Copy link

@jumph4x jumph4x commented Sep 26, 2014

Very cool!

@rchrd2

This comment has been minimized.

Copy link

@rchrd2 rchrd2 commented Nov 25, 2014

These worked great for me. Thank you!

@infamoushm

This comment has been minimized.

Copy link

@infamoushm infamoushm commented Feb 19, 2015

This is great. Thanks so much!

@edouard-lopez

This comment has been minimized.

Copy link

@edouard-lopez edouard-lopez commented Aug 20, 2016

thanks!

@Ramkumarthatipamula

This comment has been minimized.

Copy link

@Ramkumarthatipamula Ramkumarthatipamula commented Aug 22, 2017

Hey i call like this in html
<i class="fa-pulse"></i>
but it don't work for me . anything i missed please tell me

@ropangh

This comment has been minimized.

Copy link

@ropangh ropangh commented Nov 16, 2017

nice work

@moosedookie

This comment has been minimized.

Copy link

@moosedookie moosedookie commented Jan 18, 2018

Thanks!
Works great

@dejurin

This comment has been minimized.

Copy link

@dejurin dejurin commented Nov 19, 2019

Hey i call like this in html
<i class="fa-pulse"></i>
but it don't work for me . anything i missed please tell me

https://jsfiddle.net/kshj2uaz/

@scott7414

This comment has been minimized.

Copy link

@scott7414 scott7414 commented Mar 26, 2020

Hey i call like this in html
<i class="fa-pulse"></i>
but it don't work for me . anything i missed please tell me

https://jsfiddle.net/kshj2uaz/

You have to specify an icon like this
<i class="fas fa-wifi fa-pulse"></>
https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

@nm-sp

This comment has been minimized.

Copy link

@nm-sp nm-sp commented Jul 18, 2020

Great work, Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment