Simple animations using FontAwesome and some CSS3
CSS 2/3, font-awesome-animation
Snippet by Anon
6852 0
Resources
<div class="container demo ng-scope"> <div class="col-md-12"> <div class="col-md-4"> <h3> On DOM load </h3> </div> <div class="col-md-4"> <h3> On hover </h3> </div> <div class="col-md-4"> <h3> On parent hover </h3> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-wrench faa-wrench animated"></i> faa-wrench animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-wrench faa-wrench animated-hover"></i> faa-wrench animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-wrench faa-wrench"></i> faa-wrench </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-bell faa-ring animated"></i> faa-ring animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-bell faa-ring animated-hover"></i> faa-ring animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-bell faa-ring"></i> faa-ring </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-envelope faa-horizontal animated"></i> faa-horizontal animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-envelope faa-horizontal animated-hover"></i> faa-horizontal animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-envelope faa-horizontal"></i> faa-horizontal </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-thumbs-o-up faa-vertical animated"></i> faa-vertical animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-thumbs-o-up faa-vertical animated-hover"></i> faa-vertical animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-thumbs-o-up faa-vertical"></i> faa-vertical </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-warning faa-flash animated"></i> faa-flash animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-warning faa-flash animated-hover"></i> faa-flash animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-warning faa-flash"></i> faa-flash </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-thumbs-o-up faa-bounce animated"></i> faa-bounce animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-thumbs-o-up faa-bounce animated-hover"></i> faa-bounce animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-thumbs-o-up faa-bounce"></i> faa-bounce </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-spinner faa-spin animated"></i> faa-spin animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-spinner faa-spin animated-hover"></i> faa-spin animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-spinner faa-spin"></i> faa-spin </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-plane faa-float animated"></i> faa-float animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-plane faa-float animated-hover"></i> faa-float animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-plane faa-float"></i> faa-float </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-heart faa-pulse animated"></i> faa-pulse animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-heart faa-pulse animated-hover"></i> faa-pulse animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-heart faa-pulse"></i> faa-pulse </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-envelope faa-shake animated"></i> faa-shake animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-envelope faa-shake animated-hover"></i> faa-shake animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-envelope faa-shake"></i> faa-shake </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-trophy faa-tada animated"></i> faa-tada animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-trophy faa-tada animated-hover"></i> faa-tada animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-trophy faa-tada"></i> faa-tada </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-space-shuttle faa-passing animated"></i> faa-passing animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-space-shuttle faa-passing animated-hover"></i> faa-passing animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-space-shuttle faa-passing"></i> faa-passing </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-space-shuttle faa-passing-reverse animated"></i> faa-passing-reverse animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-space-shuttle faa-passing-reverse animated-hover"></i> faa-passing-reverse animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-space-shuttle faa-passing-reverse"></i> faa-passing-reverse </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-circle-o faa-burst animated"></i> faa-burst animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-circle-o faa-burst animated-hover"></i> faa-burst animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-circle-o faa-burst"></i> faa-burst </a> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <a href="#"> <i class="fa fa-star-o faa-falling animated"></i> faa-falling animated </a> </div> <div class="col-md-4"> <a href="#"> <i class="fa fa-star-o faa-falling animated-hover"></i> faa-falling animated-hover </a> </div> <div class="col-md-4"> <a href="#" class="faa-parent animated-hover"> <i class="fa fa-star-o faa-falling"></i> faa-falling </a> </div> </div> </div>
{} CSS Resources
http://doodlenerd.com/Uploads/Resources/2018/08/n4H775jTIvk/css/font-awesome-animation.min.css