JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="toolbar">
    <ul>
        <li><i class="fa fa-home"></i></li>
    </ul>
</div>

CSS

li{
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 24px;
    cursor: pointer;
}

.fa-home{
    padding: 20px;
    border: 1px solid #000;
    border-radius: 24px;
}

.fa-home:hover{
    animation-name: popout;
	animation-duration: 1s;
	animation-iteration-count: 2;
}

@keyframes popout{
	from{
		font-size: 100%;
	}
    
    50%{
        font-size: 200%;
     }
	
	to{
		font-size: 100%;
	}
}

.active{
    box-shadow: 0 10px 2px #33ff33;
}

JavaScript

/*var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);*/

$('.fa-home').bind('animationstart', function(e){
	$(this).removeClass('active');
});

$('.fa-home').bind('animationend', function(e){
	$(this).addClass('active');
});