单击时摆动CSS图标移动边框

Question

css中的一个小摆动按钮有问题。因此，在摆动时单击鼠标，该图标似乎带有边框和页面，并产生怪异的边框/阴影效果。这是CSS：

@-ms-keyframes wiggle { 
    0% {
        -ms-transform:rotate(7deg); }
    50% {
        -ms-transform:rotate(-7deg); }
    100% {
        -ms-transform:rotate(7deg); }
}

@-moz-keyframes wiggle {
    0% {
        -moz-transform:rotate(7deg); }
    50% {
        -moz-transform:rotate(-7deg); }
    100%{
        -moz-transform:rotate(7deg); } }

@-webkit-keyframes wiggle {
    0% {
        -webkit-transform:rotate(7deg); }
    50% {
        -webkit-transform:rotate(-7deg); }
    100% { 
        -webkit-transform:rotate(7deg); }
}

@keyframes wiggle { 
    0% {
        transform:rotate(7deg); }
    50% { 
        transform:rotate(-7deg); }
    100% {
        transform:rotate(7deg); }
 }

.fa-smile:hover,
.fa-check-circle:hover,
.fa-meh:hover {
    -ms-animation:wiggle .3s 2;
    -moz-animation:wiggle .3s 2;
    -webkit-animation:wiggle .3s 2;
    animation:wiggle .3s 2;
}

.fa-smile:active,
.fa-check-circle:active,
.fa-meh:active {
    background-position: 0 0,  0 100%,  0 0,  100% 0;
}

我希望这是有道理的：概括一下：在摆动时单击图标，整个边框都会创建一个深色边框，就像将其带到页面上一样。

任何帮助都会很棒！