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; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment