-
-
Save gubi/8483199 to your computer and use it in GitHub Desktop.
| .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; } | |
| } |
These worked great for me. Thank you!
This is great. Thanks so much!
thanks!
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
nice work
Thanks!
Works great
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
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
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
Great work, Thanks.
Fantastic! These work wonderfully! Thanks!
It works perfectly! Thank you so much. Would you be able to make other animations? for example flash, pop, … That would be even greater ;)
Very cool!