http://jsfiddle.net/9w0v62fa/1/
Instead of using opacity 0 and 1 in two different places, which I find redundant, I attempted to utilize the CSS animate property. However, I couldn't get it to work. Here is my code:
.btn{
background:blue;
padding:10px;
width:110px;
color:white;
white-space: nowrap;
}
.icon:before{
content: url("http://w2.aic.edu/design/32png/imgur.png");
-webkit-animation:fadeIn;
animation:fadeIn;
}
@keyframes fadeIn{
0% {opacity: 0;}
100% {opacity: 1;}
}
This is my JavaScript:
$(function(){
$('div').click(function(){
$('div').addClass('icon');
});
});