CSSで:not を使ってみる

sample.html

<a class="icon icon-reload" href="#" 
   title="Revert" id="revert_template" onclick="revertAppliedTemplate();">
   Revert
</a>

<script>
function revertAppliedTemplate() {
    $('#revert_template').toggleClass('disabled');
}
</script>

<style>
  #revert_template {
    display: inline-block;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    padding-top: 1px;
    padding-bottom: 1px;
}

#revert_template:not(.disabled):hover {
    -webkit-animation: scale .4s ease-in-out;
    animation: scale .4s ease-in-out;
}
@-webkit-keyframes scale {
    0%   { transform: scale(1.0); }
    25%   { transform: scale(1.04); }
    50%   { transform: scale(1.1); }
    75%  { transform: scale(1.04); }
    100%  { transform: scale(1.00); }
}
@keyframes scale {
    0%   { transform: scale(1.0); }
    25%   { transform: scale(1.04); }
    50%   { transform: scale(1.1); }
    75%  { transform: scale(1.04); }
    100%  { transform: scale(1.00); }
}

#revert_template.disabled {
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    opacity: 0.2;
}
</style>