One -webkit- animation working, but another is not

Question

Here is my css code. In Safari, the second :hover pseudo-class rule is working properly, but not the first one. In Chrome/IE they both work.

Am I missing something? They're set up basically the same...

@-webkit-keyframes shakeright {
    from {-webkit-transform: translate(0px,0px);}
    to {-webkit-transform: translate(5px,0px);}
}

@-webkit-keyframes hop {
    from {-webkit-transform: translate(0px,0px);}   to {-webkit-transform: translate(0px,-5px);}  
}

@keyframes shakeright {
    from {transform: translate(0px,0px);}   
    to {transform: translate(5px,0px);}  
}       

@keyframes hop {
    from {transform: translate(0px,0px);}   
    to {transform: translate(0px,-5px);}  
}

.userpoints .button-participate:hover:after, .leaderboard .button-participate:hover:after{
    -webkit-animation-name: shakeright;
    -webkit-animation-duration:.2s;
    -webkit-animation-direction:alternate;  
    -webkit-animation-iteration-count:2;

    animation-name: shakeright;
    animation-duration:.2s;
    animation-direction:alternate;  
    animation-iteration-count:2;        
}

.db-userpoints:hover{
    -webkit-animation-name: hop;
    -webkit-animation-duration:.2s;
    -webkit-animation-direction:alternate;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;

    animation-name: hop;
    animation-duration:.2s;
    animation-direction:alternate;
    animation-timing-function:linear;
    animation-delay:0s;
    animation-iteration-count:infinite;
}

Answer 1

Try to add display: inline-block to your .button-participate:after.