font-awesome-animation/demo/partials/usage.html

<p>
    Add the desired CSS class to the icon (or any element of your DOM).
</p>
<br />
<div class="demo">
    <div class="animation">
        <div class="font-animation">
            <h3>
                On DOM load
            </h3>
        </div>
        <div class="font-animation">
            <h3>
                On hover
            </h3>
        </div>
    </div>
    <div class="animation">
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-wrench faa-wrench animated"></i>
                &nbsp;faa-wrench animated
            </a>
        </div>
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-wrench faa-wrench animated-hover"></i>
                &nbsp;faa-wrench animated-hover
            </a>
        </div>
    </div>
    <div class="animation">
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-bell faa-ring animated"></i>
                &nbsp;faa-ring animated
            </a>
        </div>
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-bell faa-ring animated-hover"></i>
                &nbsp;faa-ring animated-hover
            </a>
        </div>
    </div>
    <div class="animation">
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-envelope faa-horizontal animated"></i>
                &nbsp;faa-horizontal animated
            </a>
        </div>
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-envelope faa-horizontal animated-hover"></i>
                &nbsp;faa-horizontal animated-hover
            </a>
        </div>
    </div>
    <div class="animation">
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-thumbs-o-up faa-vertical animated"></i>
                &nbsp;faa-vertical animated
            </a>
        </div>
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-thumbs-o-up faa-vertical animated-hover"></i>
                &nbsp;faa-vertical animated-hover
            </a>
        </div>
    </div>
    <div class="animation">
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-warning faa-flash animated"></i>
                &nbsp;faa-flash animated
            </a>
        </div>
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-warning faa-flash animated-hover"></i>
                &nbsp;faa-flash animated-hover
            </a>
        </div>
    </div>
    <div class="animation">
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-thumbs-o-up faa-bounce animated"></i>
                &nbsp;faa-bounce animated
            </a>
        </div>
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-thumbs-o-up faa-bounce animated-hover"></i>
                &nbsp;faa-bounce animation-hover
            </a>
        </div>
    </div>
    <div class="animation">
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-spinner faa-spin animated"></i>
                &nbsp;faa-spin animated
            </a>
        </div>
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-spinner faa-spin animated-hover"></i>
                &nbsp;faa-spin animation-hover
            </a>
        </div>
    </div>
    <div class="animation">
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-plane faa-float animated"></i>
                &nbsp;faa-float animated
            </a>
        </div>
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-plane faa-float animated-hover"></i>
                &nbsp;faa-float animation-hover
            </a>
        </div>
    </div>
    <div class="animation">
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-heart faa-pulse animated"></i>
                &nbsp;faa-pulse animated
            </a>
        </div>
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-heart faa-pulse animated-hover"></i>
                &nbsp;faa-pulse animation-hover
            </a>
        </div>
    </div>
    <div class="animation">
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-envelope faa-shake animated"></i>
                &nbsp;faa-shake animated
            </a>
        </div>
        <div class="font-animation">
            <a href="#">
                <i class="fa fa-envelope faa-shake animated-hover"></i>
                &nbsp;faa-shake animation-hover
            </a>
        </div>
    </div>
</div>
<div class="clear"></div>